什么是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
:获取并设置取消事件的事件处理程序