From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/element/animate/index.html | 117 ++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 files/ru/web/api/element/animate/index.html (limited to 'files/ru/web/api/element/animate/index.html') diff --git a/files/ru/web/api/element/animate/index.html b/files/ru/web/api/element/animate/index.html new file mode 100644 index 0000000000..04f7a3bad6 --- /dev/null +++ b/files/ru/web/api/element/animate/index.html @@ -0,0 +1,117 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API + - Animation + - Element + - Experimental + - Method + - Reference + - web animation +translation_of: Web/API/Element/animate +--- +
{{APIRef('Web Animations')}} {{SeeCompatTable}}
+ +

Метод animate() интерфейса {{domxref("Element")}} это быстрый способ создания {{domxref("Animation")}}, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса {{domxref("Animation")}}.

+ +
+

Элементы  могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав {{domxref("Element.getAnimations()")}}.

+
+ +

Синтаксис

+ +
var animation = element.animate(keyframes, options); 
+ +

Параметры

+ +
+
keyframes
+
+

Массив объектов ключевых кадров, либо объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите Keyframe Formats для получения подробной информации.

+
+
options
+
Целое число, представляющее продолжительность анимации (в миллисекундах), или объект, содержащий одно или более временных свойств.
+
+
+
id {{optional_inline}}
+
Свойство уникальное для animate(): DOMString, с помощью которого можно ссылаться на анимацию.
+
+ {{Page("ru/docs/Web/API/EffectTiming", "Свойства")}}
+
+ +

Будущие возможности

+ +

Следующие возможности в настоящее нигде не поддерживаются, но будут добавлены в ближайшем будущем .

+ +
+
composite {{optional_inline}}
+
Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию replace. +
    +
  • add диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с transform, translateX(-200px) не будут переопределять ранний вариант со значением rotate(20deg), поэтому результат будет translateX(-200px) rotate(20deg).
    • +
  • accumulate схоже, но немного умнее: blur(2) и blur(5) станет blur(7), а не blur(2) blur(5).
    • +
  • replace переписывает предыдущие значения на новые.
    • +
+
+
iterationComposite {{optional_inline}}
+
Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как accumulate или replace (смотрите выше). По умолчанию replace.
+
spacing {{optional_inline}}
+
Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию distribute. +
    +
  • distribute позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распеределены по всему времени проигрыша анимации.
    • +
  • paced позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.
    • +
+ +

 

+
+
+ +

Возвращаемое значение

+ +

Возвращает {{domxref("Animation")}}.

+ +

Пример

+ +

В демо Down the Rabbit Hole (with the Web Animation API), мы используем удобный метод animate(), чтобы сразу создать и проиграть анимацию на элементе #tunnel, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+})
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.Element.animate")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf