转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-part-3-multiple-animations.html
在关于AnimationPlayer和时间轴的讨论之后,我们来看看多动画和多player
吧。
给一个元素添加多个动画
在这个示例中,每个矩形被应用了三个动画(其中包括变换、透明度和颜色)。你可以给一个元素多次调用animate()
,类似CSS中的多动画。
使用的CSS:
#toAnimate {
animation: pulse 1s, activate 3000ms, have-fun-with-it 2.5s;
}
@keyframes pulse { /* ... */ }
@keyframes activate { /* ... */ }
@keyframes have-fun-with-it { /* ... */ }
使用Web动画API:
var animated = document.getElementById(‘toAnimate‘);
var pulseKeyframes, //定义关键帧变量
activateKeyframes,
haveFunKeyframes;
var pulse = animated.animate(pulseKeyframes, 1000); //第二个参数是持续时间的有效简写
var activate = animated.animate(activateKeyframes, 3000);
var haveFunWithIt = animated.animate(haveFunKeyframes, 2500);
使用Web动画API,它可以创建三个AnimationPlayer
,每个都可以暂停、播放、结束、取消,也可以通过时间轴或播放速率来进行控制。
获取AnimationPlayers
所以你已经开始了一个动画并且正在播放,但是当你给元素调用animate()
函数的时候,没有获取到AnimationPlayer
的引用。这下该怎么办呢?
Web动画API创建默认时间轴,并且将它直接作为文档的属性使用:document.timeline
。它目前只在Firefox Nightly和polyfill中可以使用。关于这块有非常多的内容,但是我们现在先看某个具体的方法。
var players = document.timeline.getAnimations();
//返回所有有效动画的数组(不是finished也不是canceled的)
在CodePen示例中,你会看到这些点是以随机的持续时间、延迟和无限长的变换在移动的。“Pause All”的按钮调用了getAnimations()
函数,循环访问所有返回的player
,然后一个一个将它们暂停。
尝试编辑CodePen,把iterations
的值从Infinity
修改成1
,然后先让动画播放,再按下暂停键。你会发现getAnimations()
没有返回player
。这是因为所有的动画都已经finished
,这个方法只返回running/pause
状态的动画。
接下来
在下一篇文章中,我们会看看创建一个WAAPI动画的不同方法(因为不是只有element.animate
可以创建动画)。提示:document.timeline
会经常露面的。