这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Web 动画 API的动画接口表示一个单个动画播放器并且提供用于一个动画节点或源的回放控制和一个时间轴。
构造函数
Animation()
- 创建一个新的Animation对象实例。
属性
Animation.currentTime
- 动画的当前时间值(以毫秒为单位),无论是正在运行还是已暂停。 如果动画缺少
timeline
或尚未播放,其值为null。
Animation.effect
- 获取或设置与此动画相关联的
KeyframeEffect
。 Animation.finished
只读- 返回此动画的当前完成的状态。
Animation.id
- 获取或设置用于标识动画的字符串。
Animation.playState
只读- 返回描述动画播放状态的枚举值。
Animation.playbackRate
- 返回或设置动画的播放速率。
Animation.ready
只读- 返回此动画的当前就绪状态。
Animation.startTime
- 获取或设置动画播放应开始的预定时间。
Animation.timeline
- 获取或设置与此动画相关联的
timeline
。
事件处理程序
Animation.oncancel
- 获取并设置取消事件的事件处理程序。
Animation.onfinish
- 获取并设置完成事件的事件处理程序。
方法
Animation.cancel()
- 清除此动画的所有
keyframeEffects
,并中止播放。
Animation.finish()
- 设置动画中止播放。
Animation.pause()
- 暂停播放动画。.
Animation.play()
- 开始或恢复播放动画,或者如果之前完成,则重新开始动画。
Animation.reverse()
- 反转播放动画,直到播放到动画开始时停止。 如果动画完成或未播放,它将从头到尾播放。
规范
Specification | Status | Comment |
---|---|---|
Web Animations Animation |
Working Draft | Initial definition |
浏览器兼容
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 39.0 [1] | 40.0 (40.0) [2] | 未实现 | 未实现 | 未实现 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) [1] | 40.0 (40.0) [2] | 未实现 | 未实现 | 未实现 |
[1]在Chrome 44之前,实现为AnimationPlayer(接口名称在一个早期版本的规范)。
[2] Web Animations API仅在Firefox Developer Edition和Nightly构建中默认启用。您可以通过将首选项dom.animations-api.core.enabled设置为true来在beta版本和发布版本中启用它,并可以通过将此首选项设置为false来禁用任何Firefox版本。
[3] 在Firefox 51之前,Animation.effect
属性是只读的。