Синтаксис определения ключевых кадров

В anime.js анимации строятся вокруг концепции ключевых кадров (keyframes). Ключевые кадры позволяют задавать последовательность изменений свойств элементов с точной привязкой к времени и состоянию. Каждый ключевой кадр определяет значение свойства на конкретном этапе анимации, что позволяет создавать сложные, многослойные движения.

Объект keyframes

Ключевые кадры задаются массивом объектов через свойство keyframes:

anime({
  targets: '.box',
  keyframes: [
    { translateX: 250, rotate: '1turn', duration: 1000 },
    { translateY: 150, scale: 1.5, duration: 800 },
    { translateX: 0, rotate: '0turn', scale: 1, duration: 1200 }
  ],
  easing: 'easeInOutSine'
});
  • targets – элементы, к которым применяется анимация.
  • keyframes – массив объектов, где каждый объект описывает состояние свойств на определённом этапе.
  • duration внутри ключевого кадра задаёт время выполнения конкретного шага.
  • easing применяется ко всем ключевым кадрам, если не переопределён локально.

Каждый объект внутри keyframes может содержать любые анимируемые свойства CSS или SVG, включая трансформации (translateX, rotate, scale), цвета (backgroundColor, fill) и прозрачность (opacity).

Задание значений свойств

В ключевых кадрах можно использовать несколько способов задания значений:

  1. Прямые числовые или строковые значения
{ translateX: 200, opacity: 0.5 }
  1. Функции для динамического расчёта
{ translateY: el => el.offsetHeight / 2 }

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

  1. Массив значений
{ rotate: ['0deg', '180deg', '360deg'] }

Использование массива задаёт промежуточные шаги внутри одного ключевого кадра. Продолжительность всего ключевого кадра распределяется равномерно между этими шагами.

Порядок и временные интервалы

anime.js интерпретирует ключевые кадры последовательно. Важные моменты:

  • duration каждого ключевого кадра определяет его длину.
  • Время запуска следующего кадра начинается после завершения предыдущего, если не использован delay.
  • Свойство offset позволяет точно задавать момент старта кадра относительно начала всей анимации:
keyframes: [
  { translateX: 100, offset: 0.2 },  // начинается на 20% общей анимации
  { translateY: 50, offset: 0.5 }    // начинается на 50% общей анимации
]

offset может быть задан в процентах (0–1) или миллисекундах. Это особенно полезно для синхронизации нескольких анимаций.

Переопределение easing и delay для ключевых кадров

Каждый ключевой кадр может иметь собственное easing и delay:

keyframes: [
  { translateX: 200, duration: 1000, easing: 'easeOutBounce' },
  { translateY: 150, duration: 800, delay: 500 }
]
  • easing влияет только на конкретный ключевой кадр, не затрагивая остальные.
  • delay откладывает запуск текущего ключевого кадра относительно конца предыдущего кадра или общего времени анимации.

Это позволяет создавать сложные последовательности, например, анимации с паузами, ускорениями и замедлениями между шагами.

Комбинирование с общими свойствами

Кроме keyframes, анимация может иметь общие свойства, которые применяются к каждому кадру:

anime({
  targets: '.circle',
  keyframes: [
    { translateX: 100 },
    { translateY: 50 },
    { scale: 1.2 }
  ],
  duration: 500,          // применяется ко всем кадрам по умолчанию
  easing: 'easeInOutQuad' // общий easing для всех кадров
});

Если в отдельном ключевом кадре указаны duration или easing, они переопределяют общие значения только для этого шага. Такой подход позволяет комбинировать глобальные настройки и локальные особенности.

Анимация нескольких свойств в одном ключевом кадре

В одном ключевом кадре можно изменять сразу несколько свойств:

keyframes: [
  { translateX: 100, rotate: '0.5turn', scale: 1.2, backgroundColor: '#ff0000' }
]

Все свойства анимируются одновременно, используя указанные duration и easing. Если необходимо, можно комбинировать свойства с разными временными интервалами через отдельные ключевые кадры для точной синхронизации.

Итоговое наблюдение

Синтаксис ключевых кадров в anime.js предоставляет гибкий и мощный инструмент для построения сложных анимаций. Основные принципы:

  • keyframes — массив объектов с состояниями свойств.
  • Каждое свойство можно задавать как число, строку, функцию или массив.
  • duration, easing, delay можно задавать глобально или для каждого кадра.
  • offset позволяет точно управлять моментом старта каждого шага.
  • Возможность комбинировать несколько свойств и создавать сложные последовательности анимации.

Такая структура делает anime.js идеальной для создания последовательных, плавных и высоко контролируемых анимаций.

Оглавление