Web Animations 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
继承其属性,但是以非只读形式。 -
表示可在
KeyframeEffect
对象之间共享的关键帧序列。通过使用该对象,多个KeyframeEffect
对象可以重用相同的关键帧,而无需支付多次解析它们的成本。 AnimationEffectTimingProperties
-
Element.animate()
,KeyframeEffectReadOnly.KeyframeEffectReadOnly()
和KeyframeEffect.KeyframeEffect()
的定时属性对象。
扩展的其他接口
扩展到 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 withKeyframeEffect
. AnimationEffectReadOnly
-
Defines current and future "Animation Effects" like
KeyframeEffect
, which can be passed toAnimation.Animation
objects for playing, andKeyframeEffectReadOnly
which is used byKeyframeEffect
(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 byKeyframeEffect
.
规范
Specification |
---|
Web Animations |
相关内容
- Using the Web Animations API
- Web Animations demos
- Polyfill
- Firefox's current implementation: AreWeAnimatedYet
- Browser support test