Home » Code » [译文]网页动画API教程Part2:AnimationPlayer和时间控制

[译文]网页动画API教程Part2:AnimationPlayer和时间控制

原文:http://danielcwilson.com/blog/2015/07/animations-part-2/
翻译:xiaomiao

现在我们懂得发如何使用WAAPI创建一个基本的动画,接下来就讨论一下有关状态、控制、回调以及时间轴。

AnimationPlayer的状态和控制

当你调用element.animate()时,会返回一个对象姑且称它为AnimationPlayer,同时动画开始播放。为了明确当前动画的状态,你可以通过一个只读属性playState来获得,它会返回5个状态字符串中的一个。我们也可以通过调用以下方法改变动画当前的状态:

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这4个状态之外,还有一个状态是pending,它会出现在当一个播放或暂停任务即将发生时。

下面的运动的圆圈例子展示了6个圆圈正在缩放,你可以亲自暂停或播放其中任意一个圆圈来感受一下上边的部分状态。

playback Rate

在上边的例子中,除了播放暂停按钮外还有个“2x”按钮来控制动画的播放速度,这里是单倍速和双倍速的切换。这是通过一个可读可写的playbackRate属性来控制的。

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

player.playbackRate = 2; //双倍速度,也可以使用小数来将速度变慢

完成回调

在CSS动画中,动画结束时会有事件触发,AnimationPlayer允许你为动画自然结束或者手动调用之前讨论过的finish()方法指定一个onfinish函数。注意,根据规则当一个动画的inerations被设置为无穷时(infinite),或者playbackState为0,是没有结束可言的。规则同样呼吁目前已经存在了的oncancel回调能跟Promises中的用法一样,那一定会受欢迎(尽管目前还没有实现)。

下边的例子中使用onfinish来展示动画结束时统计数字(在下一节“时间线”上还会继续讨论)。

时间轴

每一个AnimationPlayer都暴露了两个可读可写的与时间相关的属性——currentTime和startTime。暂时,我们先关注前者。

currentTime返回动画当前过去了的毫秒数,最大值是delay+(duration*iterations),因此,无限次数的动画没有最大值。

var element = document.getElementById('div');
var player = element.animate([
	{opacity: 1},
	{opacity: 0},
], {
	duration: 1000,
	delay: 500,
	iterations: 3,
	direction: 'alternate',
	fill: 'forwards',
});

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

playbackRate会影响时间轴走得多快,如果你设置playbackRate=10,动画最大的currentTime不会变化,但时间轴会是原来的10倍速度(动画消耗的真实时间为原来的1/10),上边的例子相信也看到了。

由于currentTime是可读可写的,我们可以使用它来将动画跳转到时间轴上的某点。同样的它可以让我们同步两个动画,比如下面的例子。

one more thing:reverse()

你可以使用reverse()方法反转一个动画,它跟play()其实很相似,比如除了时间轴反转外都有同样的playState,反转后的动画结束时,currentTime是0。

接下来。。。

本文好像已经有不少信息了,但其实这跟已有的知识是很相似的。下一节我们来看一些更高级的用法。

PS:如果要看每个例子的代码实现,查看元素找到iframe的src用浏览器打开再查看源代码就可以了。

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.