KeyframeEffect: метод getKeyframes()

Метод getKeyframes() объекта KeyframeEffect возвращает массив вычисленных ключевых кадров, составляющих это анимацию, вместе с их вычисленными смещениями.

Нет.

Возвращает последовательность объектов со следующим форматом:

Свойства и значения

Столько пар свойств и значений, сколько содержится в каждом ключевом кадре анимации.

offset

Смещение ключевого кадра, заданное числом от 0.0 до 1.0 включительно или null. Это эквивалентно указанию начальных и конечных состояний в процентах в CSS-стилях с использованием @keyframes. Будет равно null , если ключевой кадр размещается автоматически.

computedOffset

Вычисленное смещение для этого ключевого кадра, рассчитанное при создании списка вычисленных ключевых кадров. В отличие от offset выше, computedOffset никогда не null.

easing

Функция плавного изменения, используемая с этого ключевого кадра до следующего в ряду.

composite

KeyframeEffect.composite операция, используемая для объединения значений, указанных в этом ключевом кадре, со значениями по умолчанию. Будет отсутствовать, если используется операция composite, заданная для эффекта.

В следующем примере можно просмотреть анимацию вращения, чтобы увидеть ее ключевые кадры, используя метод getKeyframes():

const emoji = document.querySelector("div"); // element to animate

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // keyframe
    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
  ],
  {
    // keyframe options
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();

// Array [ {…}, {…} ]
console.log(rollingAnimation.effect.getKeyframes());

<div>🤣</div>

• API веб-анимации
• Метод объекта KeyframeEffect.