Что такое anime.js

anime.js — это компактная и мощная JavaScript-библиотека для создания анимаций на веб-страницах. Она предоставляет декларативный и гибкий API для управления изменениями свойств HTML-, SVG-элементов, а также JavaScript-объектов.

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

Поддерживаемые типы анимаций

anime.js работает с несколькими типами свойств:

1. CSS-свойства

  • opacity
  • transform (translate, rotate, scale, skew)
  • background-color и другие

2. Атрибуты SVG

  • stroke-dashoffset
  • viewBox
  • любые числовые или цветовые атрибуты

3. DOM-свойства

  • scrollTop
  • value

4. JavaScript-объекты

  • любые числовые свойства объектов

Базовый принцип работы

Анимация описывается через функцию anime(), которая принимает объект конфигурации:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000
});

Ключевые параметры:

  • targets — элементы или объекты, к которым применяется анимация
  • duration — длительность в миллисекундах
  • delay — задержка перед началом
  • easing — функция сглаживания
  • loop — количество повторений или бесконечный цикл

Работа с целями (targets)

anime.js поддерживает различные способы указания целей:

targets: '.className'              // CSS-селектор
targets: document.querySelectorAll('.box') 
targets: element                  // DOM-элемент
targets: [el1, el2]               // массив элементов
targets: { x: 0 }                 // объект

Библиотека автоматически обрабатывает коллекции и применяет анимации ко всем элементам.

Значения свойств

Значения могут задаваться несколькими способами:

1. Статические значения

translateX: 200

2. Относительные значения

translateX: '+=100'

3. Массив (от → до)

opacity: [0, 1]

4. Функции

translateX: (el, i) => i * 50

Функции получают:

  • el — текущий элемент
  • i — индекс
  • l — общее количество элементов

Easing-функции

Сглаживание определяет характер движения:

easing: 'easeInOutQuad'

Доступные типы:

  • linear
  • easeIn*
  • easeOut*
  • easeInOut*

Также поддерживаются:

  • cubic-bezier
  • spring-анимации
  • кастомные функции

Таймлайн (timeline)

Таймлайн позволяет объединять несколько анимаций в последовательность:

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

tl
.add({
  targets: '.box',
  translateX: 250
})
.add({
  targets: '.box',
  translateY: 100
});

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

  • последовательное выполнение
  • возможность перекрытия анимаций
  • единое управление

Смещение во времени

anime.js поддерживает управление временем через параметр offset:

.add({
  targets: '.box',
  translateX: 250,
  offset: 500
})

Это позволяет:

  • запускать анимации параллельно
  • создавать сложные композиции

Циклы и повторения

loop: true

или

loop: 3

Дополнительно:

  • direction: 'alternate' — анимация туда-обратно
  • direction: 'reverse' — обратное направление

Управление анимацией

anime.js возвращает объект управления:

const animation = anime({...});

Методы:

  • play()
  • pause()
  • restart()
  • reverse()

Свойства:

  • progress
  • paused
  • completed

Коллбеки

Поддерживаются события жизненного цикла:

anime({
  targets: '.box',
  translateX: 250,
  begin: () => {},
  update: () => {},
  complete: () => {}
});

Основные:

  • begin — начало
  • update — каждый кадр
  • complete — завершение

Работа с SVG

anime.js широко используется для анимации SVG:

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

Возможности:

  • рисование линий
  • морфинг форм
  • управление атрибутами

Цветовые анимации

Поддерживаются различные форматы:

  • HEX (#ff0000)
  • RGB (rgb(255,0,0))
  • HSL
backgroundColor: '#ff0000'

Библиотека автоматически интерполирует цвета.

Производительность

anime.js оптимизирована для производительности:

  • использует requestAnimationFrame
  • минимизирует reflow и repaint
  • эффективно работает с transform и opacity

Рекомендуется:

  • анимировать transform и opacity
  • избегать layout-свойств (width, height)

Преимущества библиотеки

Компактность

  • малый размер (~10–20 KB)

Гибкость

  • декларативный API
  • поддержка функций и динамики

Универсальность

  • DOM, CSS, SVG, JS-объекты

Отсутствие зависимостей

Ограничения

  • не является полноценным физическим движком
  • нет встроенной поддержки сложных 3D-анимаций
  • ограниченные средства работы с событиями пользователя

Сравнение с CSS-анимациями

Критерий CSS-анимации anime.js
Простота высокая высокая
Гибкость ограничена высокая
Логика отсутствует есть
Управление ограничено полное

anime.js выигрывает в сценариях, где требуется:

  • динамическое управление
  • сложные последовательности
  • программная генерация анимаций

Типичные сценарии использования

  • анимация интерфейсов (UI/UX)
  • микровзаимодействия
  • анимация SVG-иконок
  • визуализация данных
  • лендинги и презентационные сайты

Архитектурные особенности

anime.js реализует:

  • интерполяцию значений
  • систему таймингов
  • абстракцию над различными типами свойств

Внутренне библиотека:

  • нормализует значения
  • рассчитывает промежуточные состояния
  • применяет их к целям на каждом кадре

Итоговое понимание

anime.js представляет собой универсальный инструмент для создания анимаций с акцентом на простоту, выразительность и контроль. Она закрывает разрыв между декларативными CSS-анимациями и низкоуровневым управлением через JavaScript, предлагая удобный баланс между мощностью и читаемостью кода.

Оглавление