Эффект анимации в JavaScript: метод ELEMENT.ANIMATE()

# Эффект анимации в JavaScript: метод ELEMENT.ANIMATE()

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

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

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

Метод возвращает объект типа Animation.

## Синтаксис

```javascript
const animation = element.animate(keyframes, options);

Параметры

• keyframes (массив/объект) (обязательный)
  Массив объекты ключевых кадров или объект ключевых кадров, свойства которого являются массивами значений для итерации. Смотрите форматы ключевых кадров.

• options (объект/число) (обязательный)
  Целое число — продолжительность анимации (в миллисекундах) или объект с параметрами анимации.

Параметры объекта options

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

• direction
  Определяет направление анимации. Может быть:

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

• duration
  Количество миллисекунд для каждой итерации анимации. Обратите внимание, что ваша анимация не начнется, если это значение равно 0.
  По умолчанию: 0

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

  • 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 (строка)
  Определяет, отражаются ли эффекты анимации на самом элементе:

  • backwards - перед воспроизведением
  • forwards - сохраняется после окончания анимации
  • both - или оба
  • none - не отражает изменения стиля на элементе.
    По умолчанию: none

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

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

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

• currentTime
  Текущее значение времени анимации в миллисекундах, независимо от того, запущена ли анимация или приостановлена. Если анимация не имеет временной шкалы, неактивна или ещё не воспроизводится, это значение равно нулю.

• effect
  Возвращает и устанавливает объект AnimationEffectReadOnly, связанный с этой анимацией. Обычно это объект KeyframeEffect.

• finished (только для чтения)
  Возвращает промис, указывающий на завершение анимации.

• id
  Возвращает и задает строку, используемую для идентификации анимации.

• playState (только для чтения)
  Состояние воспроизведения анимации:

  • idle - текущее время анимации не определено и нет ожидающих задач.
  • running - анимация запущена.
  • paused - анимация приостановлена.
  • finished - анимация достигла одного из краев.

• playbackRate (float)
  Возвращает или устанавливает скорость воспроизведения анимации. Отрицательное число означает, что анимация воспроизводится в обратном направлении.

  • 0 - приостанавливает анимацию.
  • 1 - анимация идёт вперёд.
  • -1 - анимация идёт назад.
  • 2 - удваивает скорость анимации.
  • -1.5 - замедляет анимацию в 1.5 раза.

  Пример:

  // вперёд
  Animation.playbackRate = 1;
  Animation.play();
  
  // назад
  Animation.playbackRate = -1;
  Animation.play();

• ready (только для чтения)
  Возвращает промис, указывающий на начало анимации.

• startTime
  Возвращает и задает время начала анимации.

• timeline
  Возвращает или задает временную шкалу, связанную с этой анимацией.

События

• oncancel
  Возвращает и устанавливает обработчик события для события отмены.

• onfinish
  Возвращает и устанавливает обработчик события для события завершения.

Методи

• cancel()
  Очистить все ключевые эффекты анимации и остановить ее выполнение.

• 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();

Пример 2: Анимация движения

const elem = document.getElementById("tunnel");

elem.animate(
    [
        { transform: 'translate3D(0, 0, 0)' },
        { transform: 'translate3D(0, -300px, 0)' }
    ],
    {
        duration: 1000,
        iterations: Infinity
    }
);

Пример 3: Изменение высоты

let player = elem.animate(
    { height: ['100px', '200px'] },
    { duration: 1000, fill: 'forwards' }
);

player.onfinish = ev => { /* выполните действие по завершении */ }
// или
player.addEventListener('finish', ev => { /* выполните действие по завершении */ });

Пример 4: Появление элемента

elem.animate({ opacity: [0, 1] }, { duration: 200 });

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

Метод animate() поддерживается в большинстве современных браузеров. Убедитесь, что вы проверили совместимость с конкретными версиями.