Web Animations API

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

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

概念和用法

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

网页动画接口

Animation

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

KeyframeEffect (en-US)

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

AnimationTimeline

表示动画的时间轴。此接口用以定义时间轴功能(继承自DocumentTimeline (en-US)future timeline),并且本身不被开发人员访问。

DocumentTimeline (en-US)

表示动画时间轴,包括默认的DocumentTimeline (en-US)(通过Document.timeline访问)。

AnimationEffectTiming

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

SharedKeyframeList

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

AnimationEffectTimingProperties (en-US)

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

扩展的其他接口

The Web Animations API 向**documentelement** 添加了一些新的功能。

扩展到 Document 的接口

document.timeline

DocumentTimeline 表示默认文档时间轴

document.getAnimations() (en-US)

返回当前对文档中的元素有效的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 (en-US).

AnimationEffectReadOnly (en-US)

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

KeyframeEffectReadOnly (en-US)

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

规范

Specification
Web Animations

相关内容