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

标签：

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

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

标签：

原文地址：http://www.cnblogs.com/chern2468/p/5497455.html