以往我比較常用 CSS animation 來做動畫，但其實 JavaScript 也有一個 Web Animations API 可以操作 CSS 動畫和 SVG 動畫。比較起來，Web Animations API 提供了更多的控制和動態互動的調整，如果想要做一些互動性強的動畫，也可以參考 Web Animations API 唷。

建立基本的動畫

我覺得 CSS animation 和 Web Animations API 的基本設定差不多，有用過 CSS animation 的朋友應該很好上手。

以下是一個方塊來回移動的範例：

<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: gray;
    position: absolute;
  }
</style>
<div id="box"></div>

效果：

使用 animate() 方法來製作動畫，設定值都跟 CSS animation 很類似，陣列裡的物件是從開始到結束的樣式：

const box = document.getElementById('box');

box.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(300px)' }
], {
  duration: 2000,
  iterations: Infinity,
  direction: 'alternate'
});

以下是 animate() 方法中可用的選項與介紹：

依序播放動畫

以往要在 CSS animation 依序播放動畫，需要去設計動畫的延遲時間才能搭配的剛剛好，改用 Web Animations API 的話，使用 onfinish 就可以比較方便的處理這個問題：

const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');

const animation = box1.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(300px)' }
], {
  duration: 1500,
  fill: 'forwards'
});

animation.onfinish = () => {
  box2.animate([
    { transform: 'translateY(0)' },
    { transform: 'translateY(300px)' }
  ], {
    duration: 1000,
    fill: 'forwards'
  });
};

可以從範例看到，黃色的方塊會等灰色跑完後才開始執行動畫

Web Animations API 常見的事件與屬性

前面有用到 onfinish，是 Web Animations API 的一個事件，表示動畫播放完後要觸發的事件，除了 onfinish 外，oncancel 也蠻常用的，整理如下：

• onfinish：當動畫結束時執行某些後續操作，例如觸發另一個動畫或更改元素狀態。
• oncancel：需要在動畫被取消時執行某些操作，例如重置動畫狀態或清除資源，可以使用這個事件。

Web Animations API 也有自己的方法，以 play 為例，使用的語法為 animation.play()，更多的方法整理如下：

• play：可以開始播放或恢復播放動畫，如果動畫已經被暫停或停止，用 play() 方法可以重新啟動動畫。
• pause：暫停播放動畫
• reverse：可以反轉動畫的播放方向，如果動畫已經結束，會從終點開始反向播放。
• finish：會立刻將動畫跳到結束狀態，並且觸發 onfinish 事件。
• cancel：取消播放動畫，會跳回起始狀態，並觸發 oncancel 事件。
• updatePlaybackRate(rate)：可以調整動畫的播放速度，rate 接受一個正整數，1 表示一倍速，2 表示二倍速。

小結

與 CSS animation 相比，Web Animations API 有更多的細節可控制，適合做互動性強的動畫，我們可以按照需求使用不同的動畫處理方式，讓選擇更多元。有任何問題歡迎留言討論。