CSS 動畫與 JavaScript 動畫

您可以透過 CSS 或 JavaScript 製作動畫。應使用下列何者?原因為何?

在網頁上建立動畫的方法主要有兩種:使用 CSS 或 JavaScript。至於要選擇哪種工具,其實完全取決於專案的其他相依性和您想達成的效果類型。

摘要

  • 使用 CSS 動畫提供更簡單的「單樣本」轉場效果,例如切換 UI 元素狀態。
  • 如要產生彈跳、停止、暫停、倒轉或放慢等進階效果,請使用 JavaScript 動畫。
  • 如果您選擇用 JavaScript 製作動畫,請使用您慣用的 Web Animation API 或新型架構。

大多數基本動畫都可以使用 CSS 或 JavaScript 製作,但製作方式與時間不同 (另請參閱 CSS 與 JavaScript 成效相關文章)。兩者各有優缺點,但下列是實用指南:

  • 如果是 UI 元素較小的獨立狀態,請使用 CSS。CSS 轉場效果和動畫最適合從側邊顯示導覽選單,或是顯示工具提示。您可能會使用 JavaScript 控制狀態,但動畫本身會顯示在 CSS 中。
  • 需要大幅控制動畫時,請使用 JavaScript。Web Animations API 為標準方法,目前適用於大多數的新式瀏覽器。這提供實際物件,非常適合複雜的物件導向應用程式。當您需要停止、暫停、減緩動畫或反轉動畫時,JavaScript 也能派上用場。
  • 若要手動自動化調度管理整個場景,則直接使用 requestAnimationFrame這是進階的 JavaScript 做法,但如果您想在 HTML 畫布上建構遊戲或繪圖,或許也很實用。

此外,如果您正在使用包含動畫功能的 JavaScript 架構 (例如透過 jQuery 的 .animate() 方法或 GreenSock's TweenMax),將來加入動畫會比較方便。

使用 CSS 製作動畫

如果想在畫面上移動內容,最簡單的方法是使用 CSS 動畫。此方法稱為「宣告式」,因為您已指定要執行的操作。

以下 CSS 會在 X 軸和 Y 軸之間移動元素 100px。方法是使用設為 500ms 的 CSS 轉換。新增 move 類別後,transform 值會變更,並開始轉換。

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

試用

除了轉場效果的時間長度外,還有加/減速選項,基本上就是動畫的感受。如要進一步瞭解加/減速設定,請參閱加/減速基本概念指南。

如以上程式碼片段所示,您可以建立個別的 CSS 類別來管理動畫,接著就能使用 JavaScript 來開啟或關閉每個動畫:

box.classList.add('move');

這樣做能為您的應用程式帶來良好平衡。您可以專注於使用 JavaScript 管理狀態,只需在目標元素上設定適當的類別,讓瀏覽器處理動畫。如果往下移動,就能監聽元素上的 transitionend 事件,但只有在能淘汰舊版 Internet Explorer 時,才能夠監聽元素;第 10 版是支援這些事件的第一個版本。所有其他瀏覽器皆已在一段時間內支援該事件。

監聽轉場效果所需的 JavaScript 看起來會像這樣:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

除了使用 CSS 轉場效果之外,您也可以使用 CSS 動畫,進一步控制個別動畫的主要畫面格、時間長度和疊代。

舉例來說,您可以用相同的轉場效果為方塊製作動畫,也可以讓方塊呈現動畫,完全無需使用者互動 (例如點擊) 和可無限次重複轉換。您也可以同時變更多項屬性。

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

試用

使用 CSS 動畫時,您可以單獨定義動畫,與目標元素無關,然後使用 animation-name 屬性來選擇所需的動畫。

如果您希望 CSS 動畫在舊版瀏覽器上正常運作,就必須加入供應商前置字元。許多工具都可協助您建立需要的 CSS 版本,在來源檔案中編寫無前置字串版本。

使用 JavaScript 和 Web Animation API 製作動畫

使用 JavaScript 建立動畫比編寫 CSS 轉場或動畫更為複雜,但通常能為開發人員帶來顯著提升。您可以使用 Web Animation API,為特定 CSS 屬性建立動畫,或是建構可組合效果物件。

JavaScript 動畫是不可或缺的元件,因為在程式碼中以內嵌方式編寫時。您也可以在其他物件內封裝這些物件。如要重新建立先前所述的 CSS 轉場效果,您必須編寫下列 JavaScript:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

根據預設,網頁動畫只會修改元素的呈現方式。如果您希望將物件保留在其移動的位置,則動畫結束時,您應依照範例,修改其基礎樣式。

試用

Web Animations API 是 W3C 的相對新標準。大部分的新式瀏覽器都內建支援這項功能。如果是不支援的新瀏覽器,則可使用 polyfill

使用 JavaScript 動畫時,您可以在每個步驟完全控制元素的樣式。換句話說,您可以放慢動畫速度、暫停播放廣告、對其進行反轉,以及視需要操控元素。如果您要建構複雜的物件導向應用程式,這麼做特別有用,因為您可以妥善封裝自己的行為。