現代的前端，在頁面上做動畫，已經是家常便飯。瀏覽器的渲染性能也越來越好，并且還逐漸提供了一系列的 Web Animations API。此 API 讓開發者可以使用 js 來創建動畫，相比之前使用 css 做動畫會方便很多，同時相比以前傳統的用 js 做的動畫會更加高效，并且相信未來此 API 的能力會越來越大。

Web Animations 可查看 w3c 的規范文檔。在 caniuse 上，可查看瀏覽器的支持情況，如下：

可看到，目前主流瀏覽器均已支持此 API 的基本功能。下面我們就來學習一下此 API 的基本用法。

創建動畫

創建動畫，使用 animate()方法。語法如下：

var animation = element.animate(keyframes, options);

該方法接收兩個參數。

第一個參數是 keyframes，keyframes 可以是一個 keyframe 對象組成的數組，也可以是一個 css 屬性組成的對象，每個屬性對應的值是 css 屬性值的一個數組。如下：

var keyframes = [
	{ color: '#000' }, // 0%
  { color: '#431236', offset: 0.3}, // 30%
  { color: '#000' } // 100%
];

var keyframes = {
	color: ['#000', '#431236', '#000'] // 0%, 50%, 100%
};

上面兩個例子都是合法的，但是最后的動畫效果不同，在 keyframe 對象中，設置 offset 控制幀切換時機，如果寫成屬性對象的形式，那么寫在屬性值數組中的幀會平均分布，如上面例子中切換時機為 0%, 50%, 100%。

第二個參數是 options，options 控制動畫的 timing 各屬性。我們看下這個對象上有哪些屬性。

• duration 一次動畫持續時間，default: 0
• delay 動畫開始延遲時間，default: 0
• endDelay 動畫結束延遲時間，default: 0
• easing 動畫運行速度函數
• iterations 重復次數，Infinity 表示無限重復， default: 1
• direction 動畫運行方向
  • normal 正序
  • reverse 倒序
  • alternate 先正序后倒序，交替運行
  • alternate-reverse 先倒序后正序，交替運行
• iterationStart 動畫開始點，default: 0.0。如果設置 0.5，則動畫開始是從動畫一半的位置開始。和 delay 類似，delay 設置的是時間，iterationStart 設置的是 offset。

通過列出這些屬性，可以看出，duration、delay、easing、iterations都和 css 的animation 基本一樣，只不過這里設置時間相關的數值的單位都是 ms，不能設置為 s。另外 options 可以直接設置為一個數字，那么其表示 duration。我們用以上這些內容，簡單寫一個小球運動的例子。

let ballAnimation = ballEle.animate([
  { transform: 'translateX(0)', backgroundColor: 'coral' },
  { transform: 'translateX(400px)', backgroundColor: 'yellowgreen'}
], {
  duration: 2000,
  direction: 'alternate',
  iterations: 2
});

效果如下：

控制動畫

element.animation() 創建動畫返回的對象上，有一些基本方法來控制動畫：

• play() 動畫播放
• pause() 動畫暫停
• finish() 跳到動畫結束
• cancel() 取消動畫并移除動畫效果
• reverse() 把 playbackRate 屬性值設為 -1，即倒放
• updatePlaybackRate() 更新 playbackRate，即 播放速率。playbackRate 值范圍 -1 to 1

通過這一組方法，可以對動畫更加精細地控制，播放、暫停、更新速度等。

總結

上面這些就是 Web Animations 基本的功能，這些功能主流瀏覽器基本都支持，非常強大，基本可以滿足各種需求的動畫。