WAAPI 与 CSS Animation的对比

接着上一篇博客我们继续相关的讨论。关于web Animation API 和CSS Animation 实现有何区别，这里我们来讲讲。首先会过上一节，当elem.animate()返回一个AnimationPlayer对象，然后动画开始播放。
那么动画对象是怎样的：

动画对象effect
动画对象effect.timeing

下面谈谈相关的API

1.Animation.currentTime可以获取和重置动画pause()和play()的时间。

<iframe id="GqZxRm" src="//codepen.io/airen/embed/GqZxRm?height=400&amp;theme-id=0&amp;slug-hash=GqZxRm&amp;default-tab=result&amp;user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="width: 100%; overflow: hidden;"></iframe>

2.Animation.effect可以获取和重置动画effect。如示例：

1
2
3

effect = player.effect;
/*或者通过下面方法*/
var effect = new KeyframeEffect( eleAnime, [ {opacity:0}, {opacity:1} ], 300 );

3.Animation.playbackRate获取或设置一个动画的播放速度。动画提供了一个比例因子，将会改变动画timeline和currentTime的变化比率。其初始值为1。
另外，当playbackRate的值越大，速度越快；反之速度越缓存。
4.Animation.startTime返回或设置动画回放的开始时间。
5.Animation.playState是一个只读属性，会返回动画的状态。返回的值有五个idle、pending、running、paused和finished。
6.Animation.finished是一个仅读属性，允许你返回动画完成状态。

7.Animation.ready将返回动画当前的Ready Promise对象。

player.pause(); 
player.ready.then(function() { 
    console.log(player.playState); // => running 
    });
player.play();

FEATURED TAGS