Element.animate()
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Метод animate()
интерфейса Element
это быстрый способ создания Animation
, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса Animation
.
Примечание: Элементы могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав Element.getAnimations()
(en-US).
Синтаксис
var animation = element.animate(keyframes, options);
Параметры
keyframes
-
Массив объектов ключевых кадров, либо объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите Keyframe Formats (en-US) для получения подробной информации.
options
-
Целое число**, представляющее продолжительность анимации** (в миллисекундах), или объект, содержащий одно или более временных свойств.
id Необязательный
-
Свойство уникальное для
animate()
:DOMString
, с помощью которого можно ссылаться на анимацию.
delay
(en-US) Необязательный-
Число миллисекунд для задержки начала анимации. По умолчанию
0
. direction
(en-US) Необязательный-
Указывает направление анимации. Она может выполняться вперёд (
normal
), назад (reverse
), переключать направление после каждой итерации (alternate
), или работать назад и переключать после каждой итерации (alternate-reverse
). По умолчанию"normal"
. duration
(en-US) Необязательный-
Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно
0
. easing
(en-US) Необязательный-
Скорость изменения анимации с течением времени. Принимает заранее определённые значения
"linear"
,"ease"
,"ease-in"
,"ease-out"
, и"ease-in-out"
, или кастомное"cubic-bezier"
со значением типа"cubic-bezier(0.42, 0, 0.58, 1)"
. По умолчанию"linear"
. endDelay
(en-US) Необязательный-
Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию
0
. fill
(en-US) Необязательный-
Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением (
"backwards"
), сохраняться после того, как анимация завершилась ("forwards"
), или и то и другое ("both")
. По умолчанию"none"
. iterationStart
(en-US) Необязательный-
Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию
0.0
. iterations
(en-US) Необязательный-
Число раз, которое анимация должна повторяться. По умолчанию
1
, может принимать значение доInfinity
, чтобы повторять анимацию до тех пор, пока элемент существует.
Будущие возможности
Следующие возможности в настоящее нигде не поддерживаются, но будут добавлены в ближайшем будущем .
composite Необязательный
-
Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию
replace
.add
диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример сtransform
,translateX(-200px)
не будут переопределять ранний вариант со значениемrotate(20deg)
, поэтому результат будетtranslateX(-200px) rotate(20deg)
.accumulate
схоже, но немного умнее:blur(2)
иblur(5)
станетblur(7)
, а неblur(2) blur(5)
.replace
переписывает предыдущие значения на новые.
iterationComposite Необязательный
-
Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как
accumulate
илиreplace
(смотрите выше). По умолчаниюreplace
. spacing Необязательный
-
Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию
distribute
.distribute
позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распределены по всему времени проигрыша анимации.paced
позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.
Возвращаемое значение
Возвращает Animation
.
Пример
В демо Down the Rabbit Hole (with the Web Animation API), мы используем удобный метод animate()
, чтобы сразу создать и проиграть анимацию на элементе #tunnel
, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.
js
document.getElementById("tunnel").animate(
[
// keyframes
{ transform: "translate3D(0, 0, 0)" },
{ transform: "translate3D(0, -300px, 0)" },
],
{
// timing options
duration: 1000,
iterations: Infinity,
},
);
Спецификации
Specification |
---|
Web Animations # dom-animatable-animate |
Совместимость с браузерами
BCD tables only load in the browser