Анимация по событиям

anime.js предоставляет гибкий инструмент для создания интерактивных анимаций, которые запускаются и управляются в ответ на события пользователя или системные триггеры. Важнейшей концепцией является связывание анимации с событиями DOM, такими как click, mouseover, scroll или пользовательские события.

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

Для начала необходимо подключить библиотеку. Это можно сделать через CDN:

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

После подключения анимация создается с помощью функции anime(). Ключевые параметры:

  • targets — элементы DOM или объекты, которые будут анимироваться.
  • translateX, translateY, rotate, scale и другие — свойства анимации.
  • duration — продолжительность анимации в миллисекундах.
  • easing — функция плавности, например, 'linear', 'easeInOutQuad'.

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

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

Эта анимация перемещает элемент с классом .box по оси X на 250 пикселей за одну секунду.

Привязка к событиям DOM

Анимации часто должны запускаться только после взаимодействия пользователя. Для этого используется стандартный синтаксис addEventListener:

const box = document.querySelector('.box');

box.addEventListener('click', () => {
  anime({
    targets: box,
    scale: 1.5,
    duration: 500,
    easing: 'easeOutElastic(1, .8)'
  });
});

Здесь анимация увеличивает элемент при клике. Использование событий позволяет создавать интерактивные интерфейсы без постоянного проигрывания анимаций.

Анимации при наведении курсора

Hover-анимации требуют аккуратного управления состоянием, чтобы анимация возвращалась в исходное положение:

box.addEventListener('mouseenter', () => {
  anime({
    targets: box,
    scale: 1.2,
    duration: 300,
    easing: 'easeOutQuad'
  });
});

box.addEventListener('mouseleave', () => {
  anime({
    targets: box,
    scale: 1,
    duration: 300,
    easing: 'easeOutQuad'
  });
});

Использование отдельных обработчиков для mouseenter и mouseleave обеспечивает плавное появление и исчезновение эффекта.

Пользовательские события и anime.js

Anime.js поддерживает анимацию не только на стандартные DOM-события, но и на кастомные события, которые можно вызвать программно через dispatchEvent:

const event = new CustomEvent('animateBox');

document.querySelector('.box').addEventListener('animateBox', () => {
  anime({
    targets: '.box',
    rotate: 360,
    duration: 1000,
    easing: 'easeInOutSine'
  });
});

// Вызов события
document.querySelector('.box').dispatchEvent(event);

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

Scroll-триггеры и управление прогрессом

Анимации можно привязывать к прокрутке страницы. Для этого необходимо слушать событие scroll и управлять свойством progress или seek анимации:

const scrollAnim = anime({
  targets: '.box',
  translateY: 300,
  duration: 1000,
  easing: 'linear',
  autoplay: false
});

window.addEventListener('scroll', () => {
  const scrollFraction = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  scrollAnim.seek(scrollAnim.duration * scrollFraction);
});

seek() позволяет мгновенно устанавливать прогресс анимации в зависимости от положения скролла, что удобно для «параллакс»-эффектов и визуализации прокрутки.

Комбинирование нескольких событий

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

const btn = document.querySelector('.btn');

btn.addEventListener('mouseenter', () => anime({
  targets: btn,
  scale: 1.1,
  duration: 200
}));

btn.addEventListener('mouseleave', () => anime({
  targets: btn,
  scale: 1,
  duration: 200
}));

btn.addEventListener('click', () => anime({
  targets: btn,
  rotate: 180,
  duration: 500,
  easing: 'easeInOutCubic'
}));

Каждое событие управляет своим аспектом анимации, создавая комплексное поведение без конфликтов.

Коллбэки событий anime.js

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

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

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

anime({
  targets: '.box',
  translateX: 300,
  duration: 800,
  easing: 'easeInOutQuad',
  begin: () => console.log('Анимация началась'),
  complete: () => console.log('Анимация завершена')
});

Коллбэки позволяют выполнять дополнительные действия синхронно с анимацией, например запуск аудиоэффектов или изменение других элементов DOM.

Работа с таймлайнами для событий

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

const tl = anime.timeline({
  autoplay: false
});

tl.add({
  targets: '.box',
  translateX: 200,
  duration: 500,
  easing: 'easeInOutQuad'
})
.add({
  targets: '.box',
  rotate: 90,
  duration: 400,
  easing: 'easeInOutQuad'
});

document.querySelector('.box').addEventListener('click', () => tl.play());

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

Динамическое изменение свойств анимации

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

box.addEventListener('click', (e) => {
  anime({
    targets: box,
    translateX: () => e.clientX,
    translateY: () => e.clientY,
    duration: 600,
    easing: 'easeOutExpo'
  });
});

В этом примере анимация смещает элемент к позиции курсора, обеспечивая динамическое и отзывчивое поведение интерфейса.

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

Оглавление