By

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

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

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