Web Animations

什麼是Web Animations？

Web Animations defines a model for supporting animation and synchronization on the Web platform. It is intended that other specifications will build on this model and expose its features through declarative means. W3C

以上W3C對 Web Animations的定義，目前處於草稿階段，Web Animations定義了一種同步或者異步在Web平臺上，支持動畫的模型。目前已有Chrome和Firefox開始實現Web Animations.如下是各瀏覽器對WAAP(Web Animations API)的支持狀況。

隨着css的發展和一些技js新特性的加入，動畫在過去五年裏發展的比較好。可是每一種解決方案都有他的優勢和缺點：

• CSS具備硬件加速，表現更爲平滑，並且瀏覽器內置支持，可是須要JS輔助動態變化。

• requestAnimationFrame有很好的支持而且可讓瀏覽器進行優化，可是當有不少其餘JS程序運行時，動畫可能會被阻塞，而且還須要更多的數學函數進行計時。

• setInterval不許確並且很容易卡頓。

• jQuery.animate()，性能問題。

• 第三方庫，其餘JS庫Velocity.js、Greensock，須要增長第三方的庫。

而Web Animations的目標就是帶來和CCS同樣的強勁表現，而且增長靈活性，讓瀏覽器更好的工做。

Web Animations用法事例

Web Animations但願爲CSS Transitions，CSS Animations ，和SVG 提供一些特性。所以，Web Animations是這三個規範的總稱。

監測正在運行的動畫

Web程序常常須要等到動畫結束後去更新狀態，此規範的編程接口運用程序等到全部的運行動畫結束，不管是CSS Transitions, CSS Animations, SVG animations中的哪個定義的，或者是此編程接口直接建立的。

// Wait until all animations have finished before removing the element
Promise.all(
  elem.getAnimations().map(animation => animation.finished)
).then(() => elem.remove());

或者選擇正在運行的動畫：

var isAnimating = elem.getAnimations().some(
  animation => animation.playState == 'running'
);

控制動畫

也能夠用Js的requestAnimationFrame控制動畫，可是存在表現不一致和性能問題。而Web Animations不會產生此問題。

// Fade out quickly
elem.animate({ transform: 'scale(0)', opacity: 0 }, 300);

調試動畫

在複雜的應用中，動畫是很難調試的，但能夠Web Animations的接口進行輔助調試。

// Print the id of any opacity animations on elem
elem.getAnimations().filter(
  animation =>
    animation.effect instanceof KeyframeEffectReadOnly &&
    animation.effect.getFrames().some(
      frame => frame.hasOwnProperty('opacity')
    )
).forEach(animation => console.log(animation.id));

也能夠減慢動畫的速率：

// Slow down and replay any transform animations
elem.getAnimations().filter(
  animation =>
    animation.effect instanceof KeyframeEffectReadOnly &&
    animation.effect.getFrames().some(
      frame => frame.hasOwnProperty('transform')
    )
).forEach(animation => {
  animation.currentTime = 0;
  animation.playbackRate = 0.5;
});

測試動畫

爲了測試動畫而等待動畫完成是不現實的，能夠寫一些描述快速找出特定動畫。

// Seek to the half-way point of an animation and check that the opacity is 50%
elem.getAnimations().forEach(
  animation =>
    animation.currentTime =
      animation.effect.getComputedTiming().delay +
      animation.effect.getComputedTiming().activeDuration / 2;
);
assert_equals(getComputedStyle(elem).opacity, 0.5);

// Check that the loading screen is hidden after the animations finish
elem.getAnimations().forEach(
  animation => animation.finish()
);
// Wait one frame so that event handlers have a chance to run
requestAnimationFrame(() => {
  assert_equals(
    getComputedStyle(document.querySelector('#loading')).display, 'none');
});

Web Animations模型概述

這一部分是還未規範的標準。動畫模型包含時間模型和動畫模型：

• 時間模型：在單次動畫中，將時間稱比列的轉化爲空間距離被稱做迭代進度，迭代數(動畫重複的次數)也將會被記錄下來。

• 動畫模型：將迭代進程和迭代數經過時間模型轉換成一系列的值並應用到對象的屬性上。

簡單的說就是：

• 3秒以後開始。

• 運行兩次。

• 每次運行兩秒。

• 改變一個矩形的寬度在50像素到100像素之間。

前三點被用到時間模型上，動畫會被計算，在六秒以後動畫運行到第二次迭代的一半。動畫模型將根據這些信息計算出矩形寬度。

時間模型

這一部分是還未規範的標準。時間模型具備兩大特性：無狀態和分等級。

• 無狀態：Web Animations的時間模型根據一個輸入時間產生迭代進程。

• 分等級: Web Animations的時間模型的的另外一特性是時間是被繼承的。

全局時間（global clock）

Web Animations時間體系的根源是全局時間，全局時間沒有對外暴露接口，只是用於測量時間。

時間軸（Timelines）

時間軸爲同步或者異步提供了一些了的時間值。

• 文檔時間軸(Document timelines):文檔時間軸是一種類型的時間軸（Timelines），這種類型的時間軸和文檔相關聯，文檔時間軸的時間值根據全局時間的偏移量計算出來。

• 默認文檔時間軸（The default document timeline）：每個文檔都有惟一的默認文檔時間軸，它的持續時間是文檔的生命週期。默認文檔時間軸的初始值爲0.

動畫

包含一系列的概念。

動畫模型

動畫模型根據迭代進程和當前進程去計算相應的輸出。包含：Keyframe effects，Keyframe，Combining effects.

編程接口

具體的接口可參考：W3C programming-interface

栗子來了

一個基本的Keyframe動畫

@keyframes translation {
    0% { transform: rotate(0deg) }
    8% { transform: rotate(-12deg) }
    30% { transform: rotate(270deg) }
    55% { transform: rotate(-40deg) }
    80% { transform: rotate(70deg) }
    92% { transform: rotate(-13deg) }
    100% { transform: rotate(0deg) }
}
#div {
    background: #d05f5e;
    animation: translation 3s 0s infinite linear;
}

以上CSS建立的一個動畫，可使用Web Animations建立一個相似的動畫：

var player = document.getElementById('toAnimate').animate([
    { transform: 'rotate(0deg)', offset: 0 },
    { transform: 'rotate(-12deg)', offset: .08 },
    { transform: 'rotate(270deg)', offset: .3 },
    { transform: 'rotate(-40deg)', offset: .55 },
    { transform: 'rotate(70deg)', offset: .8 },
    { transform: 'rotate(-13deg)', offset: .92 },
    { transform: 'rotate(0deg)', offset: 1 }
], {
    duration: 3000,
    iterations: Infinity,
    easing: 'linear',
    delay: 0
});

Demo演示(灰色方塊用js實現，紅色方塊用css實現)

控制動畫狀態

Web Animations開放出了playState,playbackRate等接口供調用。
Demo演示(暫停和加速)

參考資源

Web Animations.
Web Animations API.