什么是web animation api 以及為什么要使用web animation api？

web animation API 是web頁面中控制DOM元素動畫效果的javascript原生API。

1. 它能夠逐個關鍵幀控制動畫效果，
2. 具有Timeline 機制?能通過javascript來實現動畫的暫停，播放，回溯等功能
3. 能夠通過javascript的事件監聽動畫的播放與完成，對動畫的控制具有極高的細粒度。
4. 另外它共用css animation的渲染引擎，所以具有極高的性能。

如何使用

基本使用方式

最直觀的使用方式是

const myAnimation = document.getElementById('id').animate(AnimationEffect,Options)

直接調用某個dom元素的animate函數，其中

1. AnimationEffect 即keyframes object，等同于在css中使用 @keyframes
2. Options里面是當前effect的配置項，常用配置項主要有：duration 動畫播放時長， delay 時間延遲多久開始播， easing: 動畫緩解曲線， iterations 播放次數

#alice {animation: aliceTumbling infinite 3s linear;
}@keyframes aliceTumbling {0% {color: #000;transform: rotate(0) translate3D(-50%, -50%, 0);}30% {color: #431236;}100% {color: #000;transform: rotate(360deg) translate3D(-50%, -50%, 0);}
}

以上css我們可以使用如下js進行覆蓋

const myAnimation = document.getElementById("alice").animate([{ transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },{ color: "#431236", offset: 0.3 },{ transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },],{duration: 3000,iterations: Infinity,},
);myAnimation.pause()

如果是通過上述方式實現（即 element.animate(…)) 會立馬執行animation若想隨后執行需要調用pause： myAnimation.pause() 然后在需要調用的時機執行: myAnimation.play()

Group Animation

待續

最佳實踐

待續