文章目录
  1. 1. KeyframeEffects
  2. 2. GroupEffects
  3. 3. SequenceEffects

我们继续讨论WAAPI中的多个动画效果,在polyfill中提供了groupsequence两个功能。下面主要讨论这两个功能的实现。

KeyframeEffects

KeyframeEffects接受三个参数:实现动画的元素,一个数组格式的动画帧效果和时间相关参数。这些参数在我们之前使用element.animate()时已经见过了。我们新定义的这个KeyframeEffects并不好马上执行,只是创建一个引用。

1
2
3
4
5
6
7
8
9
10
11
var elem = document.getElementById('toAnimate');
var timings = {
duration: 1000,
fill: 'both'
}
var keyframes = [
{ opacity: 1 }.
{ opacity: 0 }
];
var effect = new KeyframeEffect(elem, keyframes, timings);

GroupEffects

尽管在浏览器中没有得到支持,但在polyfill中提供一个group的功能,能够同时播放多个动画。GroupEffects这个功能在新的版本中会实现,它可以让多个KeyframeEffects同步执行。

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var elem = document.getElementById('toAnimate');
var elem2 = document.getElementById('toAnimate2');
var timings = {
duration: 1000
}
var keyframes = [
{ opacity: 1 }.
{ opacity: 0 }
];
var kEffects = [
new KeyframeEffect(elem, keyframes, timings),
new KeyframeEffect(elem2, keyframes, timings)
];
var group = new GroupEffect(kEffects);
document.timeline.play(group);

SequenceEffects

GroupEffect相似,SequenceEffect可以让动画顺序执行,当然你也可以同时应用这两个功能来实现很酷的动画效果。

文章目录
  1. 1. KeyframeEffects
  2. 2. GroupEffects
  3. 3. SequenceEffects