文章目录
  1. 1. 状态控制

在上篇文章中我们已经知道如何创建一个基本的动画,下面我们将会探讨下这个api中的状态控制,回调和时间线

状态控制

当你调用element.animate()时,就会返回一个AnimationPlayer的对象,并且开始执行动画。可以通过检测只读属性playState来查看当前的状态,总共有5个状态。我们也可以通过调用其他四个方法来修改当前的动画状态:

1
2
3
4
5
6
7
var player = element.animate(/* ... */);
console.log(player.playState); //"running"
player.pause(); //"paused"
player.play(); //"running"
player.cancel(); //"idle"... jump to original state
player.finish(); //"finished"...jump to end state

在上面的例子中,有一个2x的按钮,点击它就会改变当前的动画频率,这是通过读写playbackRate属性来实现的。

1
2
3
4
5
var player = element.animate(/* ... */);
console.log(player.playbackRate); //1
player.playbackRate = 2; //double speed, can also be decimal to slow it
down.

在css中当动画结束时会触发一个事件,同样,在WAAPI中,当动画结束或直接调用finish()函数时也会有一个onfinish函数来进行处理。当然在一个无限循环的动画中没有结束事件,它的playbackRate也不可能为0。下面这个例子使用onfinish来展示动画结束时的状态:

每个AnimationPlayer有两个关于时间的读写属性:currentTimestartTime,现在我们先看看第一个属性。
currentTime返回当前动画运行的时间。最大值是:delay + (duration * iterations), 无限循环的动画没有最大值。

1
2
3
4
5
6
7
8
9
10
11
var player = element.animate([
{opacity: 1}, {opacity: 0}
], {
duration: 1000,
delay: 500,
iterations: 3
});
player.onfinish = function() {
console.log(player.currentTime); // 3500
};

由于currentTime是可写的,因此我们可以通过指定某个点来查看动画效果,它也同样可以让我们来保持两个动画的同步,如下面这个例子:

同样你也可以使用reverse()来产生相反的动画效果,但当相反的动画结束时,currentTime将会是0。

文章目录
  1. 1. 状态控制