端動畫一般在展示性網站、交互操作或者移動端活動頁面使用比較多，可能對于大部分前端平時只會用 css 里的 transition 動畫，其實前端動畫還有很多實現方式，下面是常見的幾種形式：

• css 動畫
• js 動畫
• SVG 動畫
• Canvas 動畫
• WebGL 動畫
• gif 動圖
• 圖片+位移模擬動畫
• 視頻
• flash 動畫

css 動畫

css 動畫應該是前端工作中用得最多的，兼具性能和豐富的動畫效果，很多常見的第三方動畫庫也都是基于 css 實現的。

transition 動畫

用來實現 DOM 元素形變或位移動畫，也是大部分前端工作中最常用的動畫形式，一般 web 上很多交互操作動效都是用這個實現的，簡單好用。

animation 關鍵幀動畫

css3 里新出的關鍵幀動畫，比 transition 強大數倍，可以實現各種酷炫的動畫效果。關鍵幀的意思就是我們只需要定義動畫的幾個關鍵節點的值，animation 會自動根據計時函數插值計算出來中間的步驟，實現比較平滑的動畫效果，使用時需要配合 @keyframes 來定義關鍵幀。

• animation 是以下8個屬性的簡寫形式：
• animation-name：要綁定的 @keyframes 關鍵幀動畫名
• animation-duration：動畫時長
• animation-timing-function：動畫計時函數、速度曲線，可以用預制關鍵字或者cubic-bezier()函數自定義貝塞爾曲線、steps()函數直接設置要多少步
• animation-delay：動畫開始前延遲的時長
• animation-iteration-count：動畫次數，無限循環 infinite
• animation-direction：設置是否可以反向播放動畫
• animation-fill-mode：設置 CSS 動畫在執行之前和之后如何將樣式應用于其目標，一般用來解決動畫停止后界面閃現問題
• animation-play-state：設置動畫是運行還是暫停，可以配合 js 來實現中途讓動畫停止

animation 的簡寫其實也沒啥規則，就是直接往后面隨便堆，css會有一套自己的解析規則來直接從里面取，具體可以參考 MDN，看著腦闊痛，推薦還是別簡寫了。

js 動畫

嚴格來說 js 動畫不算一個單獨的動畫，因為一般需要利用 js 里的定時器配合像 DOM 元素、Canvas 才能實現動畫效果。

setTimeout 定時器

通過 setTimout、setInterval 定時器不斷更新元素的狀態位置等來實現動畫，要求畫面的更新頻率要達到大部分屏幕要求的每秒60次才能讓肉眼看到比較流暢的，受不同屏幕和定時器執行時間影響，動畫中間容易出現丟幀的情況。

setInterval(function() {
  // 執行動畫任務
}, 1000 / 60)

requestAnimationFrame 定時器

除了定時器還有 HTML5 新出的 requestAnimationFrame，專門為實現高性能的幀動畫而設計的一個API。它的作用就是告訴瀏覽器你希望執行一個動畫，讓瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數，該回調函數會在瀏覽器下一次重繪之前執行。

若你想在瀏覽器下次重繪之前繼續更新下一幀動畫，那么回調函數自身必須再次調用 requestAnimationFrame()，這樣就能實現動畫效果了。

和 setTimeout 定時器類似，requestAnimationFrame 也可以通過 cancelAnimationFrame 取消回調函數請求。相比 setTimeout 有兩點優勢： 跟屏幕刷新頻率保持一致，不會出現像 setTimeout 丟幀的情況 性能更好，運行在后臺標簽頁或者隱藏的 里時，requestAnimationFrame() 會被暫停調用以提升性能和電池壽命

function animate() {
  // 執行動畫任務
  requestAnimationFrame(animate)
}
requestAnimationFrame(animate)

SVG 動畫

SVG（Scalable Vector Graphics）可伸縮矢量圖形，基于 xml 語法，和我們常見的 png、jpg 等位圖相比，它的文件容量較小，在進行放大、縮小或旋轉等操作時圖象不會失真。

HTML5 中是支持內聯 SVG 的，所以我們可以將 svg 標簽當作 html 標簽直接在頁面結構中使用，成為 DOM 的一部分，然后用 JavaScript 和 CSS 都是可以對其進行操作的，所以 css 的動畫效果也都是可以直接作用在 svg 元素上的。

除此之外，SVG 中也自帶 animate 元素，可以直接用來創建動畫，css 中的動畫效果也都能用其實現，相比 css 動畫 svg 可以實現出更加復雜的動畫效果，如路徑動畫、描邊動畫等，很多網站的 logo 動畫就是用 svg 來實現的。

Canvas 動畫

使用 canvas 繪制動畫原理就是，配合 js 定時器不斷的繪制擦除圖形，當繪制的速度夠快，看上去就像動起來了一樣，適合用來實現一些復雜的自定義場景動畫。

WebGL 動畫

WebGL 在前端領域也是一項很熱門的技術，它可以在網頁上繪制和渲染三維圖形，并且讓用戶與其進行交互。前面我們提到的各種動畫都是基于 2D 的二維圖形動畫，像 css 動畫中雖然也有 z 軸的概念，但是和真實的三維效果還是有很大差距的。

像常見的線上看房開車、全景展示、產品展示等都有用到 WebGL 技術，其中大名鼎鼎的三維模型庫 Three.js 應該很多人都聽過，開發成本比較高，即使有經驗的前端工程師也需要系統學習后才能上手。

gif 動圖

設計師直接導出 gif 動圖，適合一些簡單的動畫，直接利用 PS 里的動作就可以完成制作，基本沒啥前端工作量，簡單適配性好不過容易出現顏色失真或者邊緣出現鋸齒。

圖片+位移模擬動畫

這個其實跟 gif 圖類似，只不過把 gif 圖的每一幀導出成單獨的 png 圖片再拼成雪碧圖，前端利用 css 的 transition、animation 來做位移模擬實現動畫的效果，跟以前放電影有點類似，把靜態的圖片在一個固定的視窗內不斷移動，讓人看著就像動起來了一樣。

視頻

直接放一個 video 視頻，有的展示性網站會采用這種方式，直接整塊網頁背景放個 video 視頻，讓人看著像動畫的效果，實現簡單有音畫效果，但是視頻往往會很大。

flash 動畫

flash 動畫是一種基于 Adobe Flash 技術創建的動態圖像或影片，它可以在網頁中播放。flash 動畫通常包含矢量圖形、位圖、音頻、視頻等多種元素，具有高質量的圖像和動態效果。不過會影響網頁的性能，特別是在移動設備或低端設備上，現在差不多滅絕了，屬于過時了的技術。

家好！ 歡迎來到本教程，我們將深入了解使用 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();
};

使用 requestAnimationFrame 方法移動圓圈

現在我們有了圓圈，讓我們讓它們移動，因為……

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 氣泡效果。

請隨意嘗試顏色、速度和大小，使您的動畫真正獨一無二。

請隨意嘗試顏色、速度和大小，使您的動畫真正獨一無二。

我希望您在學習本教程時能像我在創建它時一樣獲得樂趣。 現在，輪到你進行實驗了。 我很想看看你是否嘗試過這個以及你創造了什么。 與我分享您的代碼鏈接，我很樂意查看。