web animation API 锋利的css动画控制器 (更新中）

什么是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

待续

最佳实践

待续