Element.animate()

Анимация на чистом JS.

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

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

Возвращает

Возвращает Animation.

Синтаксис

const animation = element.animate( keyframes, options );
keyframes(массив/объект) (обязательный)
Массив объектов ключевых кадров, либо объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите Keyframe Formats.
options(объект/число) (обязательный)

Целое число - продолжительность анимации (в миллисекундах), или объект, содержащий опции анимации.

  • id
    Свойство уникальное для animate(): DOMString, с помощью которого можно ссылаться на анимацию. Подробнее.

  • direction
    Указывает направление анимации. Она может выполняться:

    • normal - вперёд
    • reverse - назад
    • alternate - переключать направление после каждой итерации
    • alternate-reverse - работать назад и переключать после каждой итерации.

    По умолчанию: "normal"

  • duration
    Число миллисекунд, в течении которых выполняется каждая итерация анимации. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно 0.
    По умолчанию: 0

  • easing(string)
    Скорость изменения анимации с течением времени. Принимает:

    linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1)
steps(4, end)

    По умолчанию: "linear"

  • delay
    Число миллисекунд для задержки начала анимации.
    По умолчанию: 0

  • endDelay(int)
    Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации.
    По умолчанию: 0

  • fill(string)
    Диктует должны ли эффекты анимации отражаться на самом элементе:

    • backwards - перед воспроизведением
    • forwards - сохраняться после того, как анимация завершилась
    • both - или и то и другое.
    • none - не отражать изменения стилей на элементе.

    По умолчанию: "none"

  • iterationStart(float)
    Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации.
    По умолчанию: 0.0

  • iterations
    Число раз, которое анимация должна повторяться. Может принимать значение Infinity, чтобы повторять анимацию до тех пор, пока элемент существует.
    По умолчанию: 1

Свойства объекта Animation

currentTime
Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет timeline, неактивна или ещё не воспроизведена, то это значение равно нулю.
effect
Возвращает и задаёт AnimationEffectReadOnly связанный с этой анимацией. Обычно это объект KeyframeEffect.
finished(readonly)
Возвращает промис, сигнализирующий о завершении анимации.
id
Возвращает и задаёт String(строку), используемую для идентификации анимации.
playState(readonly)

Состояние воспроизведения анимации.

  • idle - The current time of the animation is unresolved and there are no pending tasks.
  • running - The animation is running.
  • paused - The animation was suspended and the Animation.currentTime property is not updating.
  • finished - The animation has reached one of its boundaries and the Animation.currentTime property is not updating.
playbackRate(float)

Возвращает или задаёт скорость воспроизведения анимации. Отрицательное число означает, что анимация идет в обратном направлении.

  • 0 - останавливает анимацию (пауза).
  • 1 - анимация движется вперед.
  • -1 - анимация движется назад.
  • 2 - удваивает скорость анимации.
  • -1.5 - замедляет анимацию в 1,5 раза.
// вперед
Animation.playbackRate = 1;
Animation.play();

// назад
Animation.playbackRate = -1;
Animation.play();

https://codepen.io/rachelnabors/pen/PNYGZQ
https://codepen.io/rachelnabors/pen/PNGGaV

ready(readonly)
Возвращает промис, сигнализирующий о начале проигрывания анимации.
startTime
Возвращает или задаёт начало выполнения анимации.
timeline
Возвращает или задаёт timeline, связанную с этой анимации.

События

oncancel
Возвращает и задаёт обработчик событий для отмены события.
onfinish
Возвращает и задаёт обработчик событий для завершения события.

Методы

cancel()
Очищает все keyframeEffects вызванные этой анимацией и прекращает её выполнение.
commitStyles()
Фиксирует конечное состояние стилей анимации, даже после того, как эта анимация была удалена. Это приведёт к тому, что конечное состояние стилей будет записано в анимируемый элемент в виде свойств внутри атрибута style.
finish()
Ищет конец анимации, в зависимости от того, играет ли анимация или инвертирует.
pause()
Приостанавливает запущенную анимацию.
persist()
Анимация сохраняется в явном виде, когда в противном случае она была бы удалена из-за поведения браузера, которое предполагает автоматическое удаление анимаций заполнения.
play()
Запускает или продолжает выполнение анимации или начинает анимацию снова, если она ранее завершилась.
reverse()
Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.
updatePlaybackRate()
Задаёт скорость анимации после синхронизации её положения воспроизведения.

Примеры

#1 Как работает

Следующий код:

var animation = elem.animate({ opacity: 0 }, 2000);

примерно тоже самое что:

var effect = new KeyframeEffect( elem, { opacity: 0 }, 2000 );
var animation = new Animation( effect, elem.ownerDocument.timeline );
animation.play();

#1 Примеры

https://web-animations.github.io/web-animations-demos/

Примеры (алиса)

Демо: Down the Rabbit Hole (with Web Animations API)

Демо: Growing/Shrinking Alice Game : Alice in Web Animations API Land

Демо: Red Queen's Race (with Web Animations API)

#1 Пример

const elem = document.getElementById("tunnel")

elem.animate(
	[
		{ transform: 'translate3D( 0, 0, 0 )' },
		{ transform: 'translate3D( 0, -300px, 0 )' }
	],
	{
		duration: 1000,
		iterations: Infinity
	}
)
let player = elem.animate(
	{ height: [ `100px`, `200px` ] },
	{ duration: 1000, fill: 'forwards' }
)

player.onfinish = ev => { /* do something */ }
// or
player.addEventListener( 'finish', ev => { /* do something */ } )
// fadeIn
elem.animate( { opacity: [ 0, 1 ], }, { duration: 200 } )

Поддержка браузерами

Ссылки