Web动画API教程2：AnimationPlayer和Timeline

标签：

转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-part-2-the-animationplayer-and-timeline-controls.html

现在我们已经知道如何使用统一Web动画API创建基本动画了，我们来谈谈动画状态及其控制、回调和时间轴。

AnimationPlayer的播放状态及其控制

当你调用element.animate()，会返回一个AnimationPlayer对象，然后动画开始播放。你可以通过检查只读属性playState来查看当前动画的状态，它会返回如下五个字符串之一。通过调用下面的四种方法之一，我们还可以修改动画的当前状态：

var player = element.animate(/* ... */);
console.log(player.playState); //"running"

player.pause(); //"paused"
player.play();  //"running"
player.cancel(); //"idle"... 跳到初始状态
player.finish(); //"finished"...跳到结束状态

除了running、paused、idle和finished这些状态，还有一个pending状态，定义了当一个播放或暂停任务被挂起时的状态。

下面的示例展示了六个圆环的缩放。你可以暂停/播放每个圆环，来看看上面提到的那些播放状态。

播放速度

在前面的CodePen示例中，还有一个2x的按钮，你可以点击更改动画的播放速率，把它切换到双倍速度的状态。这是通过读/写playbackRate属性来完成的。

var player = element.animate(/* ... */);
console.log(player.playbackRate); //1

player.playbackRate = 2; //double speed, can also be decimal to slow it down.

结束回调

使用CSS过渡，在过渡结束时，通常会触发一个事件。同样，AnimationPlayer可以让你在动画完成，或者调用前面讨论的finish()方法时，指定一个onfinish函数。注意根据规范的内容，设置了无限迭代次数的动画是没有结束的，playbackRate的值也不可能为0。规范还要求调用一个已经存在的oncancel回调，以及使用除了这些回调之外的Promise，这应该会比较受欢迎（虽然目前还没有实现）。

下面的示例使用了onfinish来显示一些当动画完成时的统计数据（而且它也对下一节中时间轴的探讨非常有帮助）。

时间轴

每个AnimationPlayer都提供了两个读/写的时间相关的属性——currentTime和startTime。我们现在侧重讲解前者。

currentTime返回当前动画的所在的毫秒数。最大值为delay + (duration * iterations)，当然，无限迭代的情况则没有最大值。

var player = element.animate([
  {opacity: 1}, {opacity: 0}
], {
  duration: 1000,
  delay: 500,
  iterations: 3
});

player.onfinish = function() {
  console.log(player.currentTime); // 3500
};

动画的播放速率会影响时间轴进行的速度。如果你设置的播放率为10，你的最大的currentTime保持不变，但是你会比时间轴快10倍。这个概念在早期的倒计时例子中也出现过。

因为currentTime是读/写属性，我们也可以使用它来跳转到时间轴上的某个点。它还可以让我们同步两个动画，如下面的示例所示。

还有一个选项：reverse()

你也可以使用reverse()来反转动画，和play()非常相似（例如它们都有相同的playState），除了它会反转时间轴。当动画结束时，它的currentTime为0。

注意：在这篇文章发表之初，reverse在polyfill中并没有工作得很好，但原生Chrome支持是有的。由于9/30/2015这个日期只可以确定这种限制只是存在于“精简版”的polyfill中。现在下面的示例应该是原生情况和引入polyfill的情况都可以工作，因为我现在使用的是完整版。

接下来

这篇的内容相对比较多，但是它还是停留在熟悉可用的东西上。下一次我们再来一次探讨一些比较高级的使用方法。

Web动画API教程2：AnimationPlayer和Timeline

标签：

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