何用原生JavaScript寫一個氣泡的效果。話不多說,直接上代碼。
script腳本如下:
html代碼如下:
是不是很簡單呢。然后我們用手機看看效果
手指點擊屏幕,或者在電腦上打開,鼠標移動時,氣泡也會跟隨移動
效果不錯,建議收藏哦
通訊應用和聊天界面中,當你正在與對方交談時對方正在輸入一條信息,會有一個小的氣泡動畫或者文案提示。本文將探討使用現代 CSS 來實現這一動畫效果,首先會實現一個 Blink 效果的動畫,然后實現一個波浪效果動畫,最后實現一個語音氣泡效果。
1)Blink 效果:
2)Wave 效果:
3)語音氣泡效果:
通過 html:5 和 div.container>(div.dot)*3 快速創建頁面及容器。
<div class="container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
1)容器居中:
body {
display: grid;
place-content: center;
min-height: 100vh;
margin: 0;
}
2)容器樣式:
注意:此處使用了現代CSS 原生嵌套(參考鏈接:)
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
background: #e2e8f0;
border-radius: 9999px;
padding: 1rem;
.dot {
border-radius: 9999px;
height: 0.5rem;
width: 0.5rem;
background: #93a2b7;
}
}
1)Blink 效果:
核心思想是通過給dot 元素設置 opacity 設置屬性來改變其透明度,同時對 3 個 dot 的透明度變化設置不同的動畫延遲 animation-delay 屬性來實現閃爍的效果。
.container {
.dot {
opacity: 0;
animation: blink 1s infinite;
&:nth-child(1) {
animation-delay: 0.3333s;
}
&:nth-child(2) {
animation-delay: 0.6666s;
}
&:nth-child(3) {
animation-delay: 0.9999s;
}
}
}
@keyframes blink {
50% {
opacity: 1;
}
}
2)Wave 效果:
核心思想:給 dot 元素增加 transform 屬性,設置 translateY 的值將目標元素從下至上垂直重新定位,同時在動畫關鍵幀 keyframes 中對顏色進行調整。
.container {
.dot {
animation: wave 1s infinite;
}
}
@keyframes wave {
0% {
transform: translateY(0px);
background: rgba(148 163 184 / 0);
}
25% {
transform: translateY(-0.25rem);
background: rgba(148 163 184 / 0.8);
}
50% {
transform: translateY(0px);
background: rgba(148 163 184 / 0);
}
75% {
transform: translateY(0.25rem);
background: rgba(148 163 184 / 0.8);
}
100% {
transform: translateY(0);
background: rgba(148 163 184 / 0);
}
}
2)語音氣泡效果:
語音氣泡是以可視化方式顯示對話或思想的一種流行而有效的方法。你可能在漫畫、卡通、廣告和社交媒體文章中見過它們。它們為設計增添了幽默、情感和個性,同時也為觀眾提供了語境。此外,語音氣泡布局還可以將文字較多的設計分割開來,使其更加吸引人。
核心思想:在 wave 效果的基礎上,對 .contianer 容器增加 ::before 和 ::after 兩個偽元素來實現左下角的圓圈,同時動畫中增加對整個容器的放大和縮小 scale 動畫,并采用 ease-out 函數。
.container {
animation: 2s zoom infinite ease-out;
position: relative;
&::before,
&::after {
content: '';
position: absolute;
border-radius: 9999px;
background: rgb(226 232 240);
bottom: 0;
left: 0;
}
&::before {
height: 1rem;
width: 1rem;
transform: translate(-0.125rem, 0.125rem);
}
&::after {
height: 0.5rem;
width: 0.5rem;
transform: translate(-0.5rem, 0.5rem);
}
.dot {
border-radius: 9999px;
height: 0.5rem;
width: 0.5rem;
background: rgba(148 163 184 / 1);
animation: wave 1.2s infinite;
&:nth-child(1) {
animation-delay: 0.4s;
}
&:nth-child(2) {
animation-delay: 0.8s;
}
&:nth-child(3) {
animation-delay: 1.2s;
}
}
}
@keyframes zoom {
50% {
transform: scale(1.1);
}
}
如果本文對您有幫助,歡迎關注、點贊和轉發,感謝您的支持!
家好! 歡迎來到本教程,我們將深入了解使用 HTML 畫布和 JavaScript 在代碼中創建有趣的氣泡的世界。 最好的部分? 我們將只使用一點 HTML 和所有 JavaScript,而不是 CSS 來實現所有這一切。
今天,我們要掌握以下幾個概念:
使用畫布上下文的 arc 方法創建圓。
利用 requestAnimationFrame 函數實現平滑的圓形動畫。
利用 JavaScript 類的強大功能來創建多個圓圈,而無需重復代碼。
向我們的圓圈添加描邊樣式和填充樣式以獲得 3D 氣泡效果。
你可以跟著我一起看,或者如果你想看源代碼,可以使用最終的codepen
首先,我們需要一個 HTML5 Canvas 元素。 Canvas 是創建形狀、圖像和圖形的強大元素。 這就是氣泡將產生的地方。 讓我們來設置一下 -
<canvas id="canvas"></canvas>
為了使用畫布做任何有意義的事情,我們需要訪問它的上下文。 Context 提供了在畫布上渲染對象和繪制形狀的接口。
讓我們訪問畫布及其上下文。
const canvas=document.getElementById('canvas');
const context=canvas.getContext('2d');
我們將設置畫布以使用整個窗口的高度和寬度 -
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
讓我們通過添加一些 css 為畫布提供一個漂亮的舒緩淺藍色背景。 這是我們要使用的唯一 CSS。 如果您愿意,也可以使用 JavaScript 來完成此操作。
#canvas {
background: #00b4ff;
}
讓我們進入有趣的部分。 我們將通過單擊畫布來創建氣泡。 為了實現這一點,我們首先創建一個點擊事件處理程序:
canvas.addEventListener('click', handleDrawCircle);
由于我們需要知道在畫布上單擊的位置,因此我們將在句柄 DrawCircle 函數中跟蹤它并使用事件的坐標 -
//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle=(event)=> {
x=event.pageX;
y=event.pageY;
// Draw a bubble!
drawCircle(x, y);
};
為了創建圓圈,我們將利用畫布上下文中可用的 arc 方法。 Arc 方法接受 x 和 y - 圓心、半徑、起始角和結束角,對于我們來說,這將是 0 和 2* Math.PI,因為我們正在創建一個完整的圓。
const drawCircle=(x, y)=> {
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI);
context.strokeStyle='white';
context.stroke();
};
現在我們有了圓圈,讓我們讓它們移動,因為……
GIF
請記住,當我們創建圓時,我們使用了 arc 方法,它接受 x 和 y 坐標 - 圓的中心。 如果我們快速移動圓的 x 和 y 坐標,就會給人一種圓在移動的印象。 讓我們試試吧!
//Define a speed by which to increment to the x and y coordinates
const dx=Math.random() * 3;
const dy=Math.random() * 7;//Increment the center of the circle with this speed
x=x + dx;
y=y - dy;
我們可以將其移至函數內 -
let x, y;
const move=()=> {
const dx=Math.random() * 3;
const dy=Math.random() * 7; x=x + dx;
y=y - dy;
};
為了讓我們的圓圈無縫移動,我們將創建一個動畫函數并使用瀏覽器的 requestAnimationFrame 方法來創建一個移動的圓圈。
const animate=()=> {
context.clearRect(0, 0, canvas.width, canvas.height);
move();
drawCircle(x,y); requestAnimationFrame(animate);
};//Don't forget to call animate at the bottom
animate();
現在我們已經創建了一個圓圈,是時候創建多個圓圈了!
但在我們創建多個圓圈之前,讓我們準備一下我們的代碼。為了避免重復我們的代碼,我們將使用類并引入 Particle 類。 粒子是我們動態藝術作品和動畫的構建塊。 每個氣泡都是一個粒子,具有自己的位置、大小、運動和顏色屬性。 讓我們定義一個 Particle 類來封裝這些屬性:
class Particle {
constructor(x=0, y=0) {}
draw() {
// Drawing the particle as a colored circle
// ...
} move() {
// Implementing particle movement
// ...
}
}
讓我們將一些已設置的常量移至 Particle 類 -
class Particle {
constructor(x=0, y=0) {
this.x=x;
this.y=y;
this.radius=Math.random() * 50;
this.dx=Math.random() * 3;
this.dy=Math.random() * 7;
}
draw() {
// Drawing the particle as a colored circle
// ...
} move() {
// Implementing particle movement
// ...
}
}
draw 方法將負責在畫布上渲染粒子。 我們已經在drawCircle中實現了這個功能,所以讓我們將它移動到我們的類中并將變量更新為類變量
class Particle {
constructor(x=0, y=0) {
this.x=x;
this.y=y;
this.radius=Math.random() * 50;
this.dx=Math.random() * 3;
this.dy=Math.random() * 7;
this.color='white';
}
draw() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
context.strokeStyle=this.color;
context.stroke(); context.fillStyle=this.color;
context.fill();
} move() {}
}
同樣,讓我們在類中移動 move 函數 -
move() {
this.x=this.x + this.dx;
this.y=this.y - this.dy;
}
現在,我們需要確保在事件處理程序中調用 Particle 類。
const handleDrawCircle=(event)=> {
const x=event.pageX;
const y=event.pageY;
const particle=new Particle(x, y);
};canvas.addEventListener('click', handleDrawCircle);
由于我們需要在 animate 函數中訪問該粒子,以便調用其 move 方法,因此我們將該粒子存儲在一個名為 molecularArray 的數組中。 當創建大量粒子時,這個數組也會很有幫助。 這是反映這一點的更新代碼 -
const particleArray=[];
const handleDrawCircle=(event)=> {
const x=event.pageX;
const y=event.pageY; const particle=new Particle(x, y);
particleArray.push(particle);
};canvas.addEventListener('click', handleDrawCircle);
記得也要更新動畫功能 -
此時,您將在屏幕上看到這個粒子 -
驚人的! 現在,到了有趣的部分! 讓我們創建很多圓圈并設計它們的樣式,使它們看起來像氣泡。
為了創建大量氣泡,我們將使用 for 循環創建粒子并將它們添加到我們在此處創建的粒子數組中。
const handleDrawCircle=(event)=> {
const x=event.pageX;
const y=event.pageY;
for (let i=0; i < 50; i++) {
const particle=new Particle(x, y);
particleArray.push(particle);
}
};canvas.addEventListener('click', handleDrawCircle);
在動畫函數中,我們將通過清除畫布并在新位置重新繪制粒子來不斷更新畫布。 這會給人一種圓圈在移動的錯覺。
const animate=()=> {
context.clearRect(0, 0, canvas.width, canvas.height);
particleArray.forEach((particle)=> {
particle?.move();
particle?.draw();
}); requestAnimationFrame(animate);
};animate();
現在我們有了移動的氣泡,是時候給它們添加顏色,使它們看起來像氣泡了!
我們將通過向氣泡添加漸變填充來實現此目的。 這可以使用 context.createRadialGradient 方法來完成。
const gradient=context.createRadialGradient(
this.x,
this.y,
1,
this.x + 0.5,
this.y + 0.5,
this.radius
);
gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');context.fillStyle=gradient;
恭喜! 您剛剛僅使用 HTML Canvas 和 JavaScript 創建了一些超級有趣的東西。 您已經學習了如何使用 arc 方法、利用 requestAnimationFrame、利用 JavaScript 類的強大功能以及使用漸變設計氣泡以實現 3D 氣泡效果。
請隨意嘗試顏色、速度和大小,使您的動畫真正獨一無二。
請隨意嘗試顏色、速度和大小,使您的動畫真正獨一無二。
我希望您在學習本教程時能像我在創建它時一樣獲得樂趣。 現在,輪到你進行實驗了。 我很想看看你是否嘗試過這個以及你創造了什么。 與我分享您的代碼鏈接,我很樂意查看。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。