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 =