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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: Animation
slug: Web/API/Animation
translation_of: Web/API/Animation
---
<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
<p><code><strong>Animation</strong></code> это интерфейс <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, представляет из себя одиночный проигрыватель анимации и обеспечивает управление воспроизведением и временную шкалу для узла анимации или источника.</p>
<h2 id="Конструктор">Конструктор</h2>
<dl>
<dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
<dd>Создаёт новый экземпляр объекта <code>Animation.</code></dd>
</dl>
<h2 id="Свойства">Свойства</h2>
<dl>
<dt>{{domxref("Animation.currentTime")}}</dt>
<dd>Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет {{domxref("AnimationTimeline", "timeline")}}, неактивна или ещё не воспроизведена, то это значение равно нулю.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.effect")}}</dt>
<dd>Возвращает и задаёт {{domxref ("AnimationEffectReadOnly")}} связанный с этой анимацией. Обычно это объект {{domxref ("KeyframeEffect")}}.</dd>
<dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
<dd>Возвращает промис, сигнализирующий о завершении анимации.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.id")}}</dt>
<dd>Возвращает и задаёт String(строку), используемую для идентификации анимации.</dd>
<dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
<dd>Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.playbackRate")}}</dt>
<dd>Возвращает или задаёт скорость воспроизведения анимации.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
<dd>Возвращает промис, сигнализирующий о начале проигрывания анимации.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.startTime")}}</dt>
<dd>Возвращает или задаёт начало выполнения анимации.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.timeline")}}</dt>
<dd>Возвращает или задаёт {{domxref("AnimationTimeline", "timeline")}}, связанную с этой анимации.</dd>
</dl>
<h3 id="Обработчики_событий">Обработчики событий</h3>
<dl>
<dt>{{domxref("Animation.oncancel")}}</dt>
<dd>Возвращает и задаёт обработчик событий для отмены события.</dd>
<dt>{{domxref("Animation.onfinish")}}</dt>
<dd>Возвращает и задаёт обработчик событий для завершения события.</dd>
</dl>
<h2 id="Методы">Методы</h2>
<dl>
<dt>{{domxref("Animation.cancel()")}}</dt>
<dd>Очищает все {{domxref("KeyframeEffect", "keyframeEffects")}} вызванные этой анимацией и прекращает его выполнение.</dd>
<dt>{{domxref("animation.commitStyles()")}}</dt>
<dd>Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведёт к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.finish()")}}</dt>
<dd>Ищет конец анимации, в зависимости от того, играет ли анимация или инвертирует.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.pause()")}}</dt>
<dd>Приостанавливает запущенную анимацию.</dd>
<dt>{{domxref("animation.persist()")}}</dt>
<dd>Анимация сохраняется в явном виде, когда в противном случае она была бы удалена из-за поведения браузера, которое предполагает автоматическое удаление анимаций заполнения.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.play()")}}</dt>
<dd>Запускает или продолжает выполнение анимации или начинает анимацию снова, если она ранее завершилась.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.reverse()")}}</dt>
<dd>Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.</dd>
<dt>{{domxref("Animation.updatePlaybackRate()")}}</dt>
<dd>Задаёт скорость анимации после синхронизации её положения воспроизведения.</dd>
</dl>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарии</th>
</tr>
<tr>
<td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
<td>{{Spec2("Web Animations")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Microsoft Edge</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatChrome(39.0)}} [1]</td>
<td>{{CompatGeckoDesktop(48)}}<sup>[2][3]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Конструктор</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop(48)}}<sup>[2][3]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatVersionUnknown}} [1]</td>
<td>{{CompatGeckoMobile(48)}}<sup>[2][3]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Конструктор</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile(48)}}<sup>[2][3]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] До Chrome 44, реализован как <code>AnimationPlayer</code> (название интерфейса в ранней версии спецификации).</p>
<p>[2] API Веб Анимации включён по умолчанию только в Firefox Developer Edition и в Nightly builds. Вы можете включить его в сборках beta и release переключив свойство <code>dom.animations-api.core.enabled</code> на <code>true</code>, и можете выключить его в любой версии Firefox переключив его на <code>false</code>.</p>
<p>[3] До Firefox 51, свойство {{domxref("Animation.effect")}} было только для чтения.</p>
|
