Константы и перечисления

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

Направления анимации (direction)

Свойство direction определяет направление воспроизведения анимации. Возможные значения:

  • normal — анимация проигрывается один раз от начального состояния к конечному.
  • reverse — анимация проигрывается один раз в обратном направлении.
  • alternate — анимация проигрывается туда и обратно один раз.
  • alternate-reverse — анимация проигрывается обратно и затем туда один раз.

Пример использования:

anime({
  targets: '.box',
  translateX: 250,
  direction: 'alternate',
  loop: 2
});

В этом примере элемент .box перемещается вправо, а затем возвращается в исходное положение, повторяя цикл дважды.

Типы циклов (loop)

Константа loop управляет количеством повторений анимации:

  • Числовое значение (integer) — количество повторений.
  • true — бесконечная анимация.
  • false — анимация проигрывается один раз.

Пример бесконечной анимации:

anime({
  targets: '.circle',
  rotate: 360,
  loop: true,
  duration: 2000,
  easing: 'linear'
});

Функции смягчения (easing)

anime.js предоставляет встроенные константы для описания кривых ускорения и замедления анимации. Основные группы:

  • linear — равномерная скорость.
  • easeInSine, easeOutSine, easeInOutSine — синусоидальные кривые.
  • easeInQuad, easeOutQuad, easeInOutQuad — квадратичные кривые.
  • easeInCubic, easeOutCubic, easeInOutCubic — кубические кривые.
  • easeInQuart, easeOutQuart, easeInOutQuart — четвёртая степень.
  • easeInQuint, easeOutQuint, easeInOutQuint — пятая степень.
  • easeInExpo, easeOutExpo, easeInOutExpo — экспоненциальное ускорение.
  • easeInCirc, easeOutCirc, easeInOutCirc — окружность.
  • easeInBack, easeOutBack, easeInOutBack — эффект «отскока» за пределы.

Пример использования:

anime({
  targets: '.triangle',
  translateY: 100,
  easing: 'easeOutBounce',
  duration: 1500
});

События жизненного цикла (begin, update, complete)

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

  • begin — срабатывает при старте анимации.
  • update — срабатывает на каждом кадре.
  • complete — срабатывает при завершении анимации.

Пример:

anime({
  targets: '.line',
  scaleX: 2,
  duration: 1000,
  begin: () => console.log('Анимация началась'),
  complete: () => console.log('Анимация завершена')
});

Методы управления анимацией (play, pause, restart, seek)

Константы, отражающие внутренние методы для управления:

  • play() — запуск или продолжение анимации.
  • pause() — приостановка анимации.
  • restart() — перезапуск с начала.
  • seek(time) — установка позиции анимации в миллисекундах.

Пример:

const anim = anime({
  targets: '.star',
  translateY: 200,
  duration: 2000
});

anim.pause();      // остановка
anim.seek(1000);   // установка на середину анимации
anim.play();       // продолжение

Свойства трансформации и ключевые константы (translateX, translateY, rotate, scale)

В anime.js большинство свойств анимируется через заранее определённые ключи:

  • translateX, translateY — смещение по осям X и Y.
  • rotate — вращение в градусах.
  • scale, scaleX, scaleY — масштабирование элементов.
  • opacity — прозрачность.
  • skewX, skewY — искажение по осям.

Пример комбинированной анимации:

anime({
  targets: '.card',
  translateX: 300,
  rotate: '1turn',
  scale: 1.5,
  duration: 1200,
  easing: 'easeInOutQuad'
});

Перечисления для атрибутов SVG

Для SVG-элементов доступны дополнительные константы:

  • strokeDasharray — длина пунктирной линии.
  • strokeDashoffset — смещение пунктирной линии.
  • pathLength — длина пути для анимации обводки.

Пример анимации линии:

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 2000,
  loop: true
});

Заключение по константам и перечислениям

Ключевые моменты для работы с anime.js:

  1. direction и loop управляют цикличностью и направлением анимации.
  2. easing позволяет точно задавать кривые ускорения и замедления.
  3. События begin, update, complete дают контроль над жизненным циклом.
  4. Методы управления анимацией (play, pause, restart, seek) позволяют динамически управлять процессом.
  5. Ключи свойств (translateX, rotate, scale и др.) и SVG-атрибуты дают полный контроль над визуальными эффектами.

Понимание этих констант обеспечивает создание сложных и гибких анимаций с высокой степенью контроля над каждым кадром.

Оглавление