转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-part-4-groupEffects-and-sequenceEffects.html
我们来继续我们关于Web动画API中多动画的探讨,讨论一下现在polyfill中提供的分组和序列功能。
KeyframeEffects
KeyframeEffect
传入三个参数:要添加动画的元素、关键帧数组、时间函数timing
选项。这些参数都是我们之前使用element.animate()
时就已经看过的。这个新对象基本上还是为单独动画绘制的蓝图,我们将会在讨论分组和序列的过程中了解。它不用于启动动画,只能定义动画。
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
尽管它目前还没有提供任何原生实现,甚至在规范Level 1中都找不到,但是polyfill提供了一种将动画分组并一起播放的方法。GroupEffect
(即将在规范Level 2中面世)可以给一个或多个KeyframeEffect
分组并使它们同时播放。
GroupEffect
接受一个effects
参数,我们可以把包括了多个动画的KeyframeEffect
数组传入。定义好之后,就可以在就绪的时候在默认的时间轴上播放一整组动画。
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
允许我们将多个动画组合在一起(由KeyframeEffect
指定),但是它们不是平行播放的,而是一个接一个。你也可以,polyfill中有定义,将GroupEffect
和SequenceEffect
一起使用(例如拥有多个序列的同一分组)。
序列动画提供了一些和CSS类似的工作方法,或者是我们目前为止看到的统一动画API的内容。我们需要根据前一个动画的持续时间,或者使用finish
回调,来维护动画的延迟时间。这些方法很难维护,而且可能并不精确。
使用之前GroupEffect
代码段中的变量:
var sequence = new SequenceEffect(kEffects);
document.timeline.play(sequence);
创建动画的另一种方法
前面我们已经看了使用element.animate()
创建动画的方法。这是创建动画的一个比较快速的方法,马上创建马上播放,并获取AnimationPlayer
对象的引用。我们一开始是比较关心animate()
的,因为它得到Chrome的支持已经有一段时间了,还有polyfill。而Firefox则倾向于通过Animation
构造的方法,但是目前还不能使用/演示(而且没有polyfill)。但是,我们会在这里简单介绍一下它,因为它向我们展示了另一种使用KeyframeEffect
的方法,而且它在规范Level 1中也有,所以我们应该也很快就可以看到关于它的示例了。
First a reminder of how element.animate()
works:
首先是element.animate()
的工作原理:
var elem = document.getElementById(‘toAnimate‘);
var timings = {
duration: 1000,
fill: ‘both‘
}
var keyframes = [
{ opacity: 1 }.
{ opacity: 0 }
];
elem.animate(keyframes, timings);
使用和上面相同的变量,下面是使用Animation
构造的等价代码:
var kEffect = new KeyframeEffect(elem, keyframes, timings);
var player = new Animation(kEffect, elem.ownerDocument.timeline);
player.play();
这里的主要区别是,动画不是立即开始播放的,所以要提前创建后边播放的动画。
接下来
因为规范Level 2使得这个方法通过了工作草案,我们应该可以看到这些不同Effects的更多详细定义。本系列教程计划还有两篇文章。下次我们会再次看看,将来还有哪些内容是我们比较期待可以很快看到的。