Web动画API教程3:多个动画

发布于 彦子

这是介绍浏览器中web动画API的系列教程的第三篇。如果你有什么问题/想法,或者发现我理解错了规范的内容,或是希望我在接下来的文章中对某部分内容进行探讨的话,请在Twitter给我留言吧~@dancwilson

在关于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 Nightlypolyfill中可以使用。关于这块有非常多的内容,但是我们现在先看某个具体的方法。

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会经常露面的。

本文根据@Dancwilson的《Web Animations API Tutorial Part 3: Multiple Animations》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://danielcwilson.com/blog/2015/08/animations-part-3

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:https://www.fedev.cn/css3/web-animations-api-tutorial-part-3-multiple-animations.htmljordan retro 11 mens style