Переход с других библиотек

При переходе с библиотек анимации, таких как GSAP, Velocity.js или jQuery.animate, важно понять философию anime.js, которая строится вокруг лёгкой декларативной настройки анимаций через объект конфигурации. Основная идея — описывать что анимировать, какие параметры и какой временной контекст, а не вручную управлять каждым кадром.

Синтаксис и структура анимаций

В anime.js ключевой элемент — вызов функции anime() с объектом настроек:

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

Для сравнения, в jQuery аналог выглядел бы так:

$('.box').animate({ left: '250px', rotate: '360deg' }, 2000);

anime.js позволяет управлять анимацией более гибко, без необходимости смешивать CSS и JS.

Работа с ключевыми кадрами

Anime.js поддерживает анимацию через keyframes, что упрощает сложные последовательности:

anime({
  targets: '.circle',
  keyframes: [
    { translateY: 0 },
    { translateY: 100 },
    { translateY: 50 }
  ],
  duration: 3000,
  easing: 'easeOutElastic'
});
  • keyframes заменяют цепочку .to() или последовательность коллбеков в других библиотеках.
  • Каждое состояние можно задавать как объект с параметрами и временем.
  • Anime.js автоматически рассчитывает интерполяцию между кадрами.

Сравнение с GSAP

GSAP использует цепочку TweenMax.to() или TimelineMax, например:

gsap.to(".box", { x: 250, rotation: 360, duration: 2, ease: "power1.inOut" });

В anime.js тот же результат достигается компактным объектом:

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  duration: 2000,
  easing: 'easeInOutQuad'
});

Преимущества anime.js:

  • Меньше кода для базовых анимаций.
  • Встроенные типы easing.
  • Поддержка keyframes и timelines без внешних зависимостей.
  • Возможность анимировать CSS-переменные и SVG-свойства напрямую.

Таймлайны

Anime.js предоставляет anime.timeline() для организации последовательностей:

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

tl.add({ targets: '.box1', translateX: 250 })
  .add({ targets: '.box2', translateY: 200 }, '-=500'); // перекрытие
  • Позволяет объединять анимации в цепочки.
  • Поддерживает отрицательные смещения для перекрывающихся анимаций.
  • Аналог GSAP Timeline, но с более лаконичным синтаксисом.

Анимация SVG и CSS-свойств

Anime.js умеет анимировать SVG-пути, strokeDashoffset, scale, opacity, color и CSS-переменные. Например:

anime({
  targets: '#path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 2000,
  loop: true
});
  • anime.setDashoffset автоматически вычисляет длину пути.
  • Можно создавать бесконечные анимации через loop: true.

Управление прогрессом анимации

Anime.js позволяет управлять анимацией динамически:

const animation = anime({
  targets: '.box',
  translateX: 500,
  duration: 3000,
  autoplay: false
});

animation.play();   // запуск
animation.pause();  // пауза
animation.restart(); // перезапуск
animation.seek(1500); // переход к определённому времени
  • Полный контроль над состоянием анимации.
  • Полезно при синхронизации с событиями или скроллом.

Преобразование кода с других библиотек

  1. jQuery.animate → anime.js

    • Прямое соответствие CSS-свойств и числовых параметров.
    • Добавление easing через easing вместо swing или linear.

  2. GSAP Tween → anime.js

    • Замена .to() на targets + объект параметров.
    • Цепочки заменяются на timeline() с add().

  3. Velocity.js → anime.js

    • Velocity использует { properties, options }; anime.js объединяет их в один объект.
    • Поддержка keyframes упрощает сложные последовательности.

Встроенные утилиты

Anime.js содержит методы для упрощения работы:

  • anime.random(min, max) — случайные значения.
  • anime.setDashoffset(el) — вычисление длины SVG-пути.
  • anime.stagger(value, options) — последовательная анимация массивов элементов:
anime({
  targets: '.dots div',
  translateY: 50,
  delay: anime.stagger(100)
});
  • Позволяет создавать эффект волны или цепной анимации без ручного расчёта задержек.

Ключевые отличия в подходе

  • Объектная декларативность вместо цепочек методов.
  • Унификация CSS и JS свойств в одной анимации.
  • Лёгкая интеграция с SVG и canvas.
  • Timeline с простым перекрытием и отложенными стартами.

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

Оглавление