В этой статье мы изучим основы Anime.js и узнаем, как создавать анимацию с ключевыми кадрами (keyframe) и временными шкалами (timeline). Anime.js – это очень легкий движок анимации JavaScript, поддерживающий все современные браузеры. Для создания очень красивой анимации требуется всего пара строк JavaScript. Давайте посмотрим на пример и изучим основы Anime.js.

В приведенном выше фрагменте сначала мы вызываем функцию anime и передаем ей простой объект JavaScript, определяющий нашу анимацию.
Объект анимации довольно понятен:

targets: сообщает anime, как найти элементы, которые мы хотим оживить. Вы можете использовать селекторы CSS или просто передать ему узел DOM. В приведенном выше примере мы просто используем селектор CSS для нацеливания на элемент с идентификатором .element
rotate: это одно из свойств, которое мы хотим оживить. Anime автоматически анимирует свойство вращения элемента на два оборота – ‘2turn’
duration: определяет продолжительность анимации в миллисекундах. В приведенном выше примере продолжительность анимации составляет
3000 миллисекунд, что эквивалентно 3 секундам.
easing: функции плавности сообщают Anime, как интерполировать значения transition. В приведенном выше примере мы говорим Anime вращать квадрат линейно. В аниме есть множество встроенных функций плавности. Вы можете найти их все на странице документации.
loop: используя свойство loop, мы можем повторить анимацию после ее завершения. В приведенном выше примере мы повторяем анимацию, устанавливая для свойства loop значение true.

Как видите, создавать анимацию с помощью Anime довольно просто. Теперь давайте посмотрим на другой пример и оживим несколько свойств:

В приведенном выше примере мы анимируем как scale, так и CSS-свойства translateX. Кроме того, мы устанавливаем начальное, конечное, начальное значения для translateX, используя массив с тремя значениями. Первое значение – это начальное значение, второе значение – конечное значение перехода. третье значение – опять начальное. Также стоит упомянуть, что мы указываем значения как строки с явными единицами пикселей. Вы можете использовать разные единицы измерения, но вам нужно будет использовать строку для явного задания значения и единицы, как в примере выше. И, наконец, для функции замедления мы используем одну из предопределенных функций easyInOutSine. Эта функция замедления очень распространена и приводит к очень плавному переходу между началом и концом.

Временная шкала аниме имеет очень простой API:

Приведенный выше фрагмент создает пустую временную шкалу. Вы можете настроить временную шкалу, передав ей простой объект JavaScript, который определяет свойства duration, loop, easing, autoplay. Обратите внимание, что эти свойства будут применяться к каждой анимации, если они не будут перезаписаны каждой анимацией:

В приведенном выше фрагменте мы создали временную шкалу и настроили ее для автоматического воспроизведения более 1000 мс, а также настроили ее для использования функции замедления easyInOutSine. Обратите внимание, что эти настройки будут применяться к каждой добавляемой нами анимации, если мы не переопределим свойства в каждой анимации. Теперь мы собираемся использовать метод add и добавить несколько анимаций на нашу временную шкалу. Обратите внимание, что мы определяем анимацию, просто используя простые объекты, а не объекты анимации аниме:

В приведенном выше фрагменте первая анимация будет следовать «глобальным» настройкам временной шкалы. Но вторая анимация переопределяет свойства замедления и длительности.