1. Web
  2. Web API
  3. Web Animations API
  4. Web Animations API 概念

Web Animations API 概念

Web Animations API (WAAPI) 為 JavaScript 開發者提供了對瀏覽器動畫引擎的訪問許可權，並描述了動畫應如何在瀏覽器中實現。本文將介紹 WAAPI 背後的重要概念，為您提供對其工作原理的理論性理解，以便您能有效地使用它。要了解如何使用該 API，請參閱其姊妹文章 使用 Web Animations API。

Web Animations API 彌補了宣告式 CSS 動畫和過渡與動態 JavaScript 動畫之間的空白。這意味著我們可以使用它來建立和操作類似 CSS 的動畫，從一個預定義狀態過渡到另一個狀態，或者我們可以使用變數、迴圈和回撥來建立響應不斷變化的輸入的互動式動畫。

History

十多年前，同步多媒體整合語言，或稱 SMIL (發音為“smile”)，為 SVG 帶來了動畫。當時這是瀏覽器需要關注的唯一動畫引擎。雖然五分之四的瀏覽器支援 SMIL，但它只動畫 SVG 元素，無法從 CSS 使用，而且非常複雜——通常會導致不一致的實現。十年後，Safari 團隊引入了 CSS Animations 和 CSS Transitions 規範。

Internet Explorer 團隊請求了一個動畫 API，以整合和規範所有瀏覽器中的動畫功能，因此 Mozilla Firefox 和 Google Chrome 的開發人員開始認真努力，以建立統一所有動畫的規範：Web Animations API。現在我們有了 WAAPI，未來的動畫規範可以建立在它之上，從而保持一致並協同工作。它還為所有瀏覽器提供了一個可以遵循的參考點，用於當前可用的規範。

An illustration showing the Web Animations API ruling over CSS Transitions and Animations as well as a third category representing future animation specs with a question mark.

兩個模型：定時和動畫

Web Animations API 在兩個模型之上執行，一個處理時間——定時（Timing），另一個處理隨時間發生的視覺變化——動畫（Animation）。定時模型跟蹤我們在設定的時間軸上走了多遠。動畫模型確定在任何給定時間動畫物件應是什麼樣子。

時序

定時模型是使用 WAAPI 的基礎。每個文件都有一個主時間軸，Document.timeline，它從頁面載入的那一刻開始無限延伸——或者直到視窗關閉。根據它們的持續時間，我們的動畫分佈在這個時間軸上。每個動畫都透過其 startTime 錨定在時間軸上的一個點，表示動畫開始播放的文件時間軸上的時刻。

所有動畫的播放都依賴於這個時間軸：拖動動畫會沿著時間軸移動動畫的位置；減慢或加速播放速率會壓縮或擴充套件其在時間軸上的跨度；重複動畫會在時間軸上排列其額外的迭代。未來，我們可能會有基於手勢、滾動位置甚至父子時間軸的時間軸。Web Animations API 開啟了許多可能性！

Animation

動畫模型可以被看作是一個數組，包含了動畫在任何給定時間可能出現的快照，沿著動畫的持續時間排列。

An illustration showing how the animation model can be visualized as a series of snapshots arranged along a timeline. In this case, pictures of the cheshire cat going from 0 (there) to 8 seconds (not all there—only his smile is left).

核心概念

Web 動畫由 Timeline 物件、Animation 物件和 Animation Effect 物件協同工作。透過組合這些不同的物件，我們可以建立自己的動畫。

時間軸

時間軸物件提供了有用的 currentTime 屬性，它讓我們知道頁面已經打開了多長時間：這是文件時間軸的“當前時間”，該時間軸在頁面開啟時開始。在撰寫本文時，只有一種時間軸物件：基於活動文件的 timeline。未來我們可能會看到對應頁面長度的時間軸物件，比如 ScrollTimeline，或者其他完全不同的東西。

Animation

Animation 物件可以被想象成 DVD 播放器：它們用於控制媒體播放，但如果沒有要播放的媒體，它們什麼也不做。Animation 物件接受 Animation Effects 作為媒體，特別是關鍵幀效果 (Keyframe Effects)（我們稍後會講到）。就像 DVD 播放器一樣，我們可以使用 Animation 物件的 play、pause、seek 以及 控制動畫播放方向 和 速度 的方法。

An illustration likening how an Animation plays a KeyframeEffect like a DVD player plays a DVD.

動畫效果

如果 Animation 物件是 DVD 播放器，那麼我們可以將 Animation Effects，或者 Keyframe Effects，看作是 DVD。Keyframe Effects 是一組資訊，其中至少包含一組關鍵幀和它們需要動畫的時間段。Animation 物件接收這些資訊，並使用 Timeline 物件組裝一個可播放的動畫，供我們檢視和引用。

目前我們只有一種可用的動畫效果型別：KeyframeEffect。未來我們可能會有各種各樣的 Animation Effects——例如，用於組合和排序的效果，類似於我們在 Flash 中擁有的功能。事實上，Group Effects 和 Sequence Effects 已經在進行中的 Web Animations API 第二級規範中進行了概述。

從零散的片段組裝動畫

我們可以使用 Animation() 建構函式 將所有這些片段組合起來建立一個工作的動畫，或者我們可以使用 Element.animate() 快捷函式。（在 使用 Web Animations API 中可以瞭解更多關於如何使用 Element.animate() 的資訊。）

用途

該 API 允許建立動態動畫，這些動畫可以即時更新，也可以建立更直接、宣告式的動畫，類似於 CSS 建立的動畫。它可用於自動化測試，以確保您的 UI 動畫正常執行。它為構建時間軸等動畫開發工具打開了瀏覽器的渲染引擎。它也是構建自定義或商業動畫庫的一個高效能基礎。（請參閱 像你根本不在乎一樣用 Element.animate 進行動畫。）在某些情況下，它可能與 jQuery 類似，不需要一個功能齊全的庫，就像原生 JavaScript 可以用於許多目的而無需 jQuery 一樣。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.