blob: 76f53da3855f523cb7b8298e2c751f63a26f3a7d (
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
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>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support (Element.animate())</td>
<td>{{ CompatChrome(36.0) }}<br>
</td>
<td>{{ CompatGeckoDesktop(48)}}</td>
<td>{{ CompatNo }}</td>
<td>
<p>29<br>
28 behind pref</p>
</td>
<td>{{ CompatNo }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatNo }}</td>
<td>{{CompatChrome(42.0)}}</td>
<td>{{ CompatGeckoMobile(48) }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatChrome(42.0) }}</td>
</tr>
</tbody>
</table>
[1] 仅在Firefox 52 Nightly和Dev版本中启用。在测试版/发布版中关闭。</div>
<p> </p>
<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>
|
