blob: bd6edbbf97d7ed7ac1eeceee1b0c7557be40df28 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
title: Web Animations API
slug: Web/API/Web_Animations_API
tags:
- web animations api
translation_of: Web/API/Web_Animations_API
---
<p>{{DefaultAPISidebar("Web Animations")}}{{ SeeCompatTable() }}</p>
<div class="summary">
<p><strong>Web Animations API </strong>允许同步和定时更改网页的呈现, 即DOM元素的动画。它通过组合两个模型来实现：时序模型 和 动画模型。</p>
</div>
<h2 id="概念和用法">概念和用法</h2>
<dl>
<dd>Web Animations API 为浏览器和开发人员提供了一种用于描述DOM元素的动画的通用语言。要获得有关API背后的概念以及如何使用它的更多信息，请阅读<a href="/zh-CN/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">使用Web Amimations API</a>。</dd>
</dl>
<h2 id="网页动画接口">网页动画接口</h2>
<dl>
</dl>
<dl>
<dt>{{domxref("Animation")}}</dt>
<dd>提供播放控制、动画节点或源的时间轴。 可以接受使用{{domxref("KeyframeEffect.KeyframeEffect")}}构造函数创建的对象作为参数。</dd>
<dt>{{domxref("KeyframeEffect")}}</dt>
<dd>描述动画属性的集合，调用<strong>keyframes</strong>及{{domxref("Animation Effect Timing Properties")}}。 然后可以使用 {{domxref("Animation")}} 构造函数进行播放。</dd>
<dt>{{domxref("AnimationTimeline")}}</dt>
<dd>表示动画的时间轴。 此接口用以定义时间轴功能（继承自{{domxref("DocumentTimeline")}}和{{domxref("future timeline")}}），并且本身不被开发人员访问。</dd>
<dt>{{domxref("DocumentTimeline")}}</dt>
<dd>表示动画时间轴，包括默认的{{domxref("DocumentTimeline")}}（通过{{domxref("Document.timeline")}}访问）。</dd>
<dt>{{domxref("AnimationEffectTiming")}}</dt>
<dd>包含{{domxref("KeyframeEffect")}}的{{domxref("KeyframeEffect.timing", "timing")}}返回的定时属性对象。 它从{{domxref("AnimationEffectTimingReadOnly")}}继承其属性，但是以非只读形式。</dd>
<dt>{{domxref("SharedKeyframeList")}}</dt>
<dd>表示可在{{domxref("KeyframeEffect")}}对象之间共享的关键帧序列。 通过使用该对象，多个{{domxref("KeyframeEffect")}}对象可以重用相同的关键帧，而无需支付多次解析它们的成本。</dd>
<dt>{{domxref("AnimationEffectTimingProperties")}}</dt>
<dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}和 {{domxref("KeyframeEffect.KeyframeEffect()")}}的定时属性对象。</dd>
</dl>
<h2 id="扩展的其他接口">扩展的其他接口</h2>
<p>The Web Animations API 向<strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("document")}}</strong>和<strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("element")}} </strong>添加了一些新的功能。</p>
<h3 id="扩展到_Document_的接口">扩展到 <code>Document</code> 的接口</h3>
<dl>
<dt>{{domxref("document.timeline")}}</dt>
<dd><code>DocumentTimeline</code> 表示默认文档时间轴</dd>
<dt>{{domxref("document.getAnimations()")}}</dt>
<dd>返回当前对文档中的元素有效的{{domxref("Animation")}}对象的数组。</dd>
<dt>
<h3 id="扩展到_Element_的接口">扩展到 <code>Element</code> 的接口</h3>
</dt>
<dt>{{domxref("Element.animate()")}}</dt>
<dd>用于在元素上创建和播放动画的快捷方式。 它返回创建的{{domxref("Animation")}}对象实例。</dd>
</dl>
<dl>
</dl>
<h2 id="Web动画只读接口">Web动画只读接口</h2>
<p>规格中包括以下接口，用于定义在多个其他位置使用的功能。 你不会在Web开发工作中直接使用这些接口，但他们能帮助库或框架作者了解这些接口如何工作，使他们的库的实现可以更有效，或者浏览器工程师寻找一个比规范提供的内容更容易的参考。</p>
<dl>
<dt>{{domxref("AnimationEffectTimingReadOnly")}}</dt>
<dd>A dictionary object of timing properties, which are inherited by the mutable {{domxref("AnimationEffectTiming")}} interface associated with {{domxref("KeyframeEffect")}}.</dd>
<dt>{{domxref("AnimationEffectReadOnly")}}</dt>
<dd>Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation.Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">Transitions</a>).</dd>
<dt>{{domxref("KeyframeEffectReadOnly")}}</dt>
<dd>Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}. </dd>
</dl>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Animations')}}</td>
<td>{{Spec2('Web Animations')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="相关内容">相关内容</h2>
<p> </p>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
<li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li>
<li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
<li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
<li>
<p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p>
</li>
</ul>
|
