Web Animations API - Web API 接口参考 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Web Animations API 允许同步和定时更改网页的呈现, 即DOM元素的动画。它通过组合两个模型来实现：时序模型 和 动画模型。

概念和用法

Web Animations API 为浏览器和开发人员提供了一种用于描述DOM元素的动画的通用语言。要获得有关API背后的概念以及如何使用它的更多信息，请阅读使用Web Amimations API。

网页动画接口

Animation

提供播放控制、动画节点或源的时间轴。 可以接受使用KeyframeEffect.KeyframeEffect构造函数创建的对象作为参数。

KeyframeEffect

描述动画属性的集合，调用keyframes及Animation Effect Timing Properties。 然后可以使用 Animation 构造函数进行播放。

AnimationTimeline

表示动画的时间轴。 此接口用以定义时间轴功能（继承自DocumentTimeline和future timeline），并且本身不被开发人员访问。

DocumentTimeline

表示动画时间轴，包括默认的DocumentTimeline（通过Document.timeline访问）。

AnimationEffectTiming

包含KeyframeEffect的timing返回的定时属性对象。 它从AnimationEffectTimingReadOnly继承其属性，但是以非只读形式。

SharedKeyframeList

表示可在KeyframeEffect对象之间共享的关键帧序列。 通过使用该对象，多个KeyframeEffect对象可以重用相同的关键帧，而无需支付多次解析它们的成本。

AnimationEffectTimingProperties

Element.animate(), KeyframeEffectReadOnly.KeyframeEffectReadOnly()和 KeyframeEffect.KeyframeEffect()的定时属性对象。

扩展的其他接口

The Web Animations API 向document和element 添加了一些新的功能。

扩展到 Document 的接口

document.timeline

DocumentTimeline 表示默认文档时间轴

document.getAnimations()

返回当前对文档中的元素有效的Animation对象的数组。

扩展到 Element 的接口

Element.animate()

用于在元素上创建和播放动画的快捷方式。 它返回创建的Animation对象实例。

Web动画只读接口

规格中包括以下接口，用于定义在多个其他位置使用的功能。 你不会在Web开发工作中直接使用这些接口，但他们能帮助库或框架作者了解这些接口如何工作，使他们的库的实现可以更有效，或者浏览器工程师寻找一个比规范提供的内容更容易的参考。

AnimationEffectTimingReadOnly

A dictionary object of timing properties, which are inherited by the mutable AnimationEffectTiming interface associated with KeyframeEffect.

AnimationEffectReadOnly

Defines current and future "Animation Effects" like KeyframeEffect, which can be passed to Animation.Animation objects for playing, and KeyframeEffectReadOnly which is used by KeyframeEffect (inherited by CSS Animations and Transitions).

KeyframeEffectReadOnly

Describes sets of animatable properties and values that can be played using the Animation.Animation() constructor, and which are inherited by KeyframeEffect. 

规范

Specification	Status	Comment
Web Animations	Working Draft	Initial definition

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (Element.animate())	36.0	48 (48)	未实现	29 28 behind pref	未实现

Feature	Android	Android Webview	Firefox Mobile (Gecko)	Firefox OS (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	未实现	42.0	48.0 (48)	未实现	未实现	未实现	未实现	42.0

[1] 仅在Firefox 52 Nightly和Dev版本中启用。在测试版/发布版中关闭。

 

相关内容

 

• Using the Web Animations API
• Web Animations demos
• Polyfill
• Firefox's current implementation: AreWeAnimatedYet

• Browser support test