Первая анимация

Anime.js распространяется в виде компактного JavaScript-файла и может быть подключён несколькими способами:

Через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

Через npm:

npm install animejs
import anime from 'animejs/lib/anime.es.js';

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

Базовая структура анимации

Любая анимация в anime.js описывается с помощью объекта конфигурации:

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

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

  • targets — элементы, к которым применяется анимация
  • свойства анимации (translateX, opacity, scale и др.)
  • дополнительные настройки (длительность, задержка, easing)

Выбор элементов (targets)

Anime.js поддерживает различные способы указания элементов:

targets: '.box'                  // CSS-селектор
targets: document.querySelector('.box') // DOM-элемент
targets: ['.box', '.circle']    // массив селекторов
targets: NodeList               // результат querySelectorAll

Также можно передавать массив объектов:

targets: [
  { x: 0 },
  { x: 100 }
]

Простейшая анимация

HTML:

<div class="box"></div>

CSS:

.box {
  width: 50px;
  height: 50px;
  background: red;
}

Jav * aScript:

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

В результате элемент плавно переместится по оси X на 200 пикселей за 1 секунду.

Свойства анимации

Anime.js поддерживает анимацию различных типов свойств:

1. CSS-трансформации

translateX
translateY
scale
rotate
skew

Пример:

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  scale: 1.5
});

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

opacity
backgroundColor
width
height
anime({
  targets: '.box',
  opacity: 0.5,
  backgroundColor: '#00ff00'
});

3. Атрибуты DOM

anime({
  targets: 'input',
  value: 100
});

Длительность и задержка

duration — время выполнения анимации (в миллисекундах):

duration: 2000

delay — задержка перед началом:

delay: 500

Можно задавать функцию:

delay: (el, i) => i * 200

Здесь каждый следующий элемент начнёт анимацию с задержкой 200 мс.

Плавность (easing)

Параметр easing определяет характер движения:

easing: 'linear'
easing: 'easeInOutQuad'
easing: 'easeOutElastic(1, .8)'

Пример:

anime({
  targets: '.box',
  translateX: 250,
  easing: 'easeOutElastic(1, .8)'
});

Elastic создаёт эффект пружины.

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

Anime.js поддерживает разные способы задания значений:

1. Конечное значение

translateX: 250

2. Диапазон

translateX: [0, 250]

3. Относительное значение

translateX: '+=100'
translateX: '-=50'

4. Функция

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

Работа с несколькими элементами

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
anime({
  targets: '.box',
  translateX: 200,
  delay: (el, i) => i * 300
});

Элементы будут двигаться последовательно.

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

loop — количество повторений:

loop: 3

Бесконечный цикл:

loop: true

direction — направление:

direction: 'normal'
direction: 'reverse'
direction: 'alternate'

Пример:

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

Элемент будет двигаться вперёд и назад.

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

duration задаёт общую скорость, но можно дополнительно управлять через:

anime.speed = 2; // ускорение в 2 раза

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

Anime.js возвращает объект анимации:

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

Методы управления:

animation.play()
animation.pause()
animation.restart()

Автозапуск

По умолчанию анимация запускается сразу. Отключение:

autoplay: false

Обработчики событий

Anime.js позволяет отслеживать этапы анимации:

anime({
  targets: '.box',
  translateX: 250,
  begin: () => console.log('Старт'),
  update: () => console.log('Обновление'),
  complete: () => console.log('Завершено')
});

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

anime({
  targets: '.box',
  translateX: 250,
  scale: 2,
  opacity: 0.5,
  duration: 1500
});

Все свойства анимируются одновременно.

Индивидуальные настройки для свойств

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

Каждое свойство имеет собственные параметры.

Использование единиц измерения

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

translateX: '50%'
translateY: '10rem'

Работа с цветами

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

backgroundColor: '#ff0000'
backgroundColor: 'rgb(255, 0, 0)'
backgroundColor: 'hsl(0, 100%, 50%)'

Комбинирование эффектов

anime({
  targets: '.box',
  translateX: 200,
  rotate: '1turn',
  scale: 1.5,
  opacity: 0.7,
  easing: 'easeInOutQuad',
  duration: 1500
});

Минимальный пример первой анимации

<div class="box"></div>

<style>
.box {
  width: 50px;
  height: 50px;
  background: blue;
}
</style>

<script>
anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad'
});
</script>

Этот пример демонстрирует базовый принцип работы библиотеки: выбор элемента, указание свойства и настройка времени и плавности.

Оглавление