Композиция анимационных элементов

Anime.js предоставляет гибкий и мощный инструмент для создания сложных анимаций в браузере. Композиция анимационных элементов позволяет объединять отдельные анимации в последовательности, параллельные группы или циклические цепочки, обеспечивая точный контроль над временем и поведением анимации.

Создание базового анимируемого объекта

Для начала важно понимать структуру анимации в anime.js. Основной метод — anime() — принимает объект конфигурации:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad'
});
  • targets — CSS-селекторы, DOM-элементы или JavaScript-объекты, к которым применяется анимация.
  • translateX, translateY, scale, rotate — свойства для анимации.
  • duration — длительность анимации в миллисекундах.
  • easing — функция сглаживания движения.

Последовательные анимации (Timeline)

Для сложной композиции используется anime.timeline(). Этот метод позволяет объединять несколько анимаций в одну цепочку с управлением временем старта каждого шага.

const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl.add({
  targets: '.box1',
  translateX: 250
})
.add({
  targets: '.box2',
  translateY: 150
}, '-=500')  // начнется на 500мс раньше завершения предыдущей анимации
.add({
  targets: '.box3',
  scale: 1.5
});

Ключевые моменты timeline:

  • Можно задавать задержку между шагами с помощью абсолютного времени (offset: 500) или относительного ('-=500').
  • Timeline поддерживает параллельное выполнение анимаций.
  • Позволяет управлять глобальными свойствами, такими как loop или direction.

Параметры композиции

Easing и синхронизация

Функции easing определяют динамику движения. В комбинации с timeline можно добиться сложных эффектов:

  • easeInOutQuad — плавное ускорение и замедление.
  • easeOutElastic — эффект «отскока».
  • linear — постоянная скорость.

Задержки и offsets

  • delay задает индивидуальную задержку перед запуском анимации.
  • offset управляет стартом анимации относительно timeline.
  • Можно использовать функции для динамической задержки, например:
anime({
  targets: '.box',
  translateX: 200,
  delay: (el, i) => i * 100
});

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

Один объект анимации может включать несколько свойств одновременно:

anime({
  targets: '.circle',
  translateX: 250,
  translateY: 100,
  rotate: '1turn',
  scale: 1.2,
  duration: 1200,
  easing: 'easeInOutSine'
});

Особенности:

  • Все свойства анимируются параллельно.
  • Можно комбинировать относительные значения ('+=50') и абсолютные (250).
  • Анимации можно повторять через loop: true.

Анимация по ключевым кадрам (Keyframes)

Keyframes позволяют создавать сложные, многосоставные движения без использования timeline:

anime({
  targets: '.star',
  keyframes: [
    { translateX: 100 },
    { translateY: 50 },
    { rotate: 180 },
    { scale: 2 }
  ],
  duration: 2000,
  easing: 'easeInOutSine'
});
  • Каждый ключевой кадр выполняется последовательно.
  • Можно использовать offset для точной синхронизации отдельных шагов.
  • Позволяет легко создавать «сложные» анимации без множества отдельных add().

Использование функций обратного вызова (Callbacks)

Для композиции анимаций важна возможность реагировать на события:

  • begin — вызывается при старте анимации.
  • complete — при завершении.
  • update — вызывается на каждом кадре, позволяет динамически менять свойства.
anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  complete: () => console.log('Анимация завершена')
});

Работа с динамическими свойствами

Можно использовать функции для вычисления значений на лету:

anime({
  targets: '.box',
  translateX: el => el.getAttribute('data-x') || 0,
  duration: 1000
});
  • Позволяет анимировать элементы по индивидуальным данным.
  • Можно комбинировать с timeline для сложных, согласованных движений.

Циклические анимации и direction

  • loop — количество повторений (true для бесконечного цикла).
  • direction — 'normal', 'reverse', 'alternate' для обратного движения.
  • Пример:
anime({
  targets: '.circle',
  translateY: 200,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutQuad'
});

Это позволяет создавать непрерывные эффекты, синхронизированные между несколькими объектами.

Итоговая структура композиции

  1. Идентификация объектов — выбор targets.
  2. Определение ключевых свойств — translate, scale, rotate и т.д.
  3. Использование timeline или keyframes для последовательной или сложной анимации.
  4. Настройка easing, delay и offset для синхронизации и ритма.
  5. Добавление callback-функций для интерактивности и динамического контроля.
  6. Циклы и направление для повторяющихся эффектов.

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

Оглавление