Элемент: метод animate()

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

keyframes

Это может быть массив объектов ключевых кадров или объект ключевых кадров, свойства которого — массивы значений для итерации. Более подробную информацию см. в разделе Форматы ключевых кадров.

options

Это может быть целое число, представляющее длительность анимации (в миллисекундах), или объект, содержащий одно или несколько свойств тайминга, описанных в параметре KeyframeEffect() options параметр и/или следующие опции:

id Необязательно

Свойство, уникальное для animate(): Строка, используемая для ссылки на анимацию.

rangeEnd Необязательно

Определяет конец диапазона привязки анимации по её временной шкале, т.е. где на временной шкале анимация закончится. JavaScript-аналог свойства CSS animation-range-end. rangeEnd может принимать несколько типов значений, как указано ниже:

• Строка, которая может быть normal (что означает отсутствие изменений в диапазоне привязки анимации), CSS <length-percentage>, представляющий смещение, <timeline-range-name>, или <timeline-range-name> со следующим за ним <length-percentage>. Например:

  "normal"
  "entry"
  "cover 100%"
  

  Подробное описание доступных значений см. в animation-range. Также ознакомьтесь с Визуализатором диапазонов временной шкалы, который наглядно показывает, что означают различные значения.

• Объект, содержащий rangeName (строку) и offset (CSSNumericValue) свойства, представляющие <timeline-range-name> и <length-percentage>, как описано в предыдущем пункте. Например:

  {
    rangeName: 'entry',
    offset: CSS.percent('100'),
  }
  

• CSSNumericValue представляющий смещение, например:

  CSS.percent("100");
  

rangeStart Необязательно

Определяет начало диапазона привязки анимации по её временной шкале, т.е. где на временной шкале анимация начнётся. JavaScript-аналог свойства CSS animation-range-start. rangeStart может принимать те же типы значений, что и rangeEnd.

timeline Необязательно

Свойство, уникальное для animate(): AnimationTimeline, которая будет ассоциироваться с анимацией. По умолчанию — Document.timeline. JavaScript-аналог свойства CSS animation-timeline свойство.

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

В этом примере мы используем метод animate() для поворота и масштабирования элемента.

HTML

<div class="newspaper">Spinning newspaper<br />causes dizziness</div>

CSS

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.newspaper {
  padding: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  background-color: white;
  cursor: pointer;
}

JavaScript

const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});

Результат

В демо «В кроличью нору» (с API веб-анимаций) мы используем удобный метод animate() для непосредственного создания и запуска анимации на элементе #tunnel, чтобы заставить его подниматься вверх бесконечно. Обратите внимание на массив объектов, переданных в качестве ключевых кадров, а также блок опций тайминга.

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

В более новых версиях браузеров вы можете установить начальное или конечное состояние анимации только (т.е. один ключевой кадр), и браузер выведет второе состояние, если сможет. Например, рассмотрите эту простую анимацию — объект ключевых кадров выглядит следующим образом:

let rotate360 = [{ transform: "rotate(360deg)" }];

Мы указали только конечное состояние анимации, а начальное состояние подразумевается.

Типичное использование свойств timeline, rangeStart, и rangeEnd может выглядеть так:

const img = document.querySelector("img");

const timeline = new ViewTimeline({
  subject: img,
  axis: "block",
});

img.animate(
  {
    opacity: [0, 1],
    transform: ["scaleX(0)", "scaleX(1)"],
  },
  {
    fill: "both",
    duration: 1,
    timeline,
    rangeStart: "cover 0%",
    rangeEnd: "cover 100%",
  },
);

• Animation
• Element.getAnimations()
• animation-range-end, animation-range-start, animation-timeline
• Анимации, управляемые прокруткой CSS
• API анимаций веб-страниц