转载

Web动画API教程2:AnimationPlayer和Timeline

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

现在我们已经知道如何使用统一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"...跳到结束状态 

除了 runningpausedidlefinished 这些状态,还有一个 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 都提供了两个读/写的时间相关的属性—— currentTimestartTime 。我们现在侧重讲解前者。

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 ),除了它会反转时间轴。当动画结束时,它的 currentTime0

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

接下来

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

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

Web动画API教程2:AnimationPlayer和Timeline

彦子

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

正文到此结束
Loading...