Web Animations 与 Angular动画

什么是Web Animations

概述

正如CSS Animations一样，Web Animations是javascript提供的一组动画接口，它允许同步和定时更改网页的呈现, 即DOM元素的动画。因此，使用Web Animations可以方便地用Js操作动画，而不再需要像之前那样写一大堆css和定时器来实现。

兼容性

它目前尚属W3C的标准草案，详情可查阅：https://www.w3.org/TR/web-animations/ ，因此很多浏览器并不能完整支持，

正因如此，W3C官方为开发者提供了web-animations/web-animations-js polyfill插件，是我们能通过插件来解决浏览器的支持问题，插件地址：https://github.com/web-animations/web-animations-js/tree/master

<script src="web-animations.min.js"></script>

如上所示插入插件，即可使用Web Animations进行开发。

代码示例

提供了很简洁明了的，我们可以在 dom 元素上直接调用的 animate 函数：

var element = document.querySelector('.animate-me');
var animation = element.animate(keyframes, 1000);

第一个参数是一个对象数组，每个对象表示动画中的一帧：

var keyframes = [
  { opacity: 0 },
  { opacity: 1 }
];

这与 css 中的 keyframe 定义类似：

0% {
  opacity: 0;
}
100% {
  opacity: 1;
}

第二个参数是 duration，表示动画的时间。同时也支持在第二个参数中传入配置项来指定缓动方式、循环次数等:

var options = {
  iterations: Infinity, // 动画的重复次数，默认是 1
  iterationStart: 0, // 用于指定动画开始的节点，默认是 0
  delay: 0, // 动画延迟开始的毫秒数，默认 0
  endDelay: 0, // 动画结束后延迟的毫秒数，默认 0
  direction: 'alternate', // 动画的方向 默认是按照一个方向的动画，alternate 则表示交替
  duration: 700, // 动画持续时间，默认 0
  fill: 'forwards', // 是否在动画结束时回到元素开始动画前的状态
  easing: 'ease-out', // 缓动方式，默认 "linear"
};
var animation = element.animate(keyframes, options);

在 dom 元素上调用 animate 函数之后返回一个 Animation 对象，或者通过 ele.getAnimation 方法获取 dom 上的 Animation 对象。

Animation对象有一些属性和方法，比如：

• Animation.finished(此动画的当前完成的状态,只读)
• Animation.effect(与此动画相关联的关键帧)
• Animation.play()(开始播放动画)
• Animation.pause()(暂停播放动画)

等等。

Animation对象还有两个事件处理程序：

• Animation.oncancel：获取并设置取消事件的事件处理程序