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
|
---
title: Element.animate()
slug: Web/API/Element/animate
tags:
- API
- Animation
- Element
- Experimental
- Method
- Reference
- web animation
translation_of: Web/API/Element/animate
---
<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
<p>Метод <strong><code>animate()</code> </strong>интерфейса<strong> </strong>{{domxref("Element")}} это быстрый способ создания {{domxref("Animation")}}, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса {{domxref("Animation")}}.</p>
<div class="note">
<p>Элементы могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав {{domxref("Element.getAnimations()")}}.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>keyframes</code></dt>
<dd>
<p>Массив объектов ключевых кадров, <strong>либо </strong>объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> для получения подробной информации.</p>
</dd>
<dt><code>options</code></dt>
<dd>Целое число<strong>, представляющее продолжительность анимации </strong>(в миллисекундах), <strong>или</strong> объект, содержащий одно или более временных свойств.</dd>
<dd>
<dl>
<dt><code>id {{optional_inline}}</code></dt>
<dd>Свойство уникальное для <code>animate()</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code>, с помощью которого можно ссылаться на анимацию.</dd>
</dl>
{{Page("ru/docs/Web/API/EffectTiming", "Свойства")}}</dd>
</dl>
<h4 id="Будущие_возможности">Будущие возможности</h4>
<p>Следующие возможности в настоящее <strong>нигде не поддерживаются</strong>, но будут добавлены в <strong>ближайшем будущем </strong>.</p>
<dl>
<dt><code>composite {{optional_inline}}</code></dt>
<dd>Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию <code>replace</code>.
<ul>
<li><code>add</code> диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с <code>transform</code>, <code>translateX(-200px)</code> не будут переопределять ранний вариант со значением <code>rotate(20deg)</code>, поэтому результат будет <code>translateX(-200px) rotate(20deg)</code>.</li>
<li><code>accumulate</code> схоже, но немного умнее: <code>blur(2)</code> и <code>blur(5)</code> станет <code>blur(7)</code>, а не <code>blur(2) blur(5)</code>.</li>
<li><code>replace</code> переписывает предыдущие значения на новые.</li>
</ul>
</dd>
<dt><code>iterationComposite {{optional_inline}}</code></dt>
<dd>Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как <code>accumulate</code> или <code>replace</code> (смотрите выше). По умолчанию <code>replace</code>.</dd>
<dt><code>spacing {{optional_inline}}</code></dt>
<dd>Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию <code>distribute</code>.
<ul>
<li><code>distribute</code> позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распределены по всему времени проигрыша анимации.</li>
<li><code>paced</code> позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.</li>
</ul>
<p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
</dd>
</dl>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>Возвращает {{domxref("Animation")}}.</p>
<h2 id="Пример">Пример</h2>
<p>В демо <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, мы используем удобный метод <code>animate()</code>, чтобы сразу создать и проиграть анимацию на элементе <code>#tunnel</code>, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.</p>
<pre class="brush: js">document.getElementById("tunnel").animate([
// keyframes
{ transform: 'translate3D(0, 0, 0)' },
{ transform: 'translate3D(0, -300px, 0)' }
], {
// timing options
duration: 1000,
iterations: Infinity
})
</pre>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("api.Element.animate")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Element.getAnimations()")}}</li>
<li>{{domxref("Animation")}}</li>
</ul>
|
