Анимация DOM с помощью Anime.js

Чтобы помочь вам выбрать между анимацией CSS и JavaScript, рассмотрите следующие отличия от Rachel Nabors.

Анимация может быть:

• статический : анимация проходит от начала до конца без логики принятия решения. Загрузчики CSS являются тому примером. Вы можете создать этот вид анимации только с помощью CSS;
• Stateful : боковая панель, которая открывается и закрывается одним нажатием кнопки, является типичным примером этого типа анимации. Вы можете создать это с помощью CSS и чуть-чуть JavaScript, чтобы добавлять и удалять классы CSS, отвечающие за отслеживание состояния элемента в вашей анимации;
• динамическая : у этого вида анимации могут быть разные результаты, которые зависят от различных факторов, таких как взаимодействие с пользователем, события DOM, состояние анимации других элементов в том же документе и т. д. Вы не можете создавать динамические анимации только с помощью CSS — в В этом контексте JavaScript, скорее всего, ваш лучший друг.

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

• вам нужно связать или разбить анимацию на несколько элементов. В этом случае каждая последующая анимация должна происходить после завершения предыдущей. Вы можете сделать это только с помощью CSS, координируя свойство delay Однако, если вам нужно изменить хотя бы одно значение, внесение необходимых изменений во все связанные элементы может быстро стать неуправляемым;
• Вы анимируете графику SVG. В этом случае недостатком является то, что CSS-анимация в SVG не всегда поддерживается во всех браузерах ;
• если ваш проект должен поддерживать старые браузеры, в которых CSS-анимация недоступна, использование надежного решения JavaScript сделает ваши анимации более доступными.

Если вы хотите прочитать больше на эту тему, Myth Busting: CSS-анимация против JavaScript от Джека Дойла, автора платформы анимации Greensock, поделился некоторыми хорошими замечаниями .

Восходящая альтернатива: API веб-анимации

W3C работает над спецификацией, которая объединяет анимацию CSS, SVG и JavaScript в едином языке без необходимости использования внешних библиотек JavaScript. API известен как веб-анимация и отлично работает для динамических анимаций, для которых CSS менее подходит. Вы можете прочитать это полезное введение в API веб-анимации (AAPI) Дадли Стори здесь на своей собственной SitePoint.

Работа над API веб-анимаций ведется устойчивыми темпами, и для браузеров, которые не предоставляют встроенную поддержку API, также доступно многозаполнение .

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

Библиотеки анимации для динамической анимации DOM

Существует широкий выбор библиотек анимации JavaScript, которые вы можете попробовать. На момент написания статьи GreenSock , также известный как GSAP (GreenSock Animation Platform), и Velocity.js были среди крупных игроков.

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

Основные функции аниме

Название аниме — японский для рисованной или компьютерной анимации (японский: ア ニ メ)

Что касается его особенностей, Anime.js …

является гибкой, но легкой библиотекой анимации JavaScript. Он работает с CSS, индивидуальными преобразованиями, SVG, DOM-атрибутами и объектами JS.

Anime.js поддерживает следующие браузеры:

• Хром
• Сафари
• опера
• Fire Fox
• Internet Explorer 10+

Со всеми доступными библиотеками анимации, почему аниме?

Ответ на этот вопрос лучше оставить автору Аниме, поскольку он объясняет, почему он придумал Anime.js, когда вокруг него что-то такое мощное, как GSAP:

GSAP может сделать намного больше, чем аниме. Но это также намного тяжелее. Моя цель с этой библиотекой состояла в том, чтобы максимально упростить API, сосредоточиться на том, что мне действительно нужно (многократные тайминги, упрощения, элементы управления воспроизведением…), при этом сохраняя сверхлегкий код (уменьшенный до 9 КБ).

Хакер Новости

Короче говоря, для динамической анимации элементов HTML и SVG, которые не требуют всех функций, которые GSAP и другие большие библиотеки предлагают из коробки, Anime.js может быть отличным вариантом для вашего проекта.

Как использовать Anime.js

Далее я предоставил несколько живых примеров для иллюстрации базового использования Anime.js. Большинство анимаций будет работать медленно в демонстрационных целях.

Включение Anime.js не отличается от включения jQuery или любой другой знакомой библиотеки JavaScript.

Загрузите файл .zip со страницы проекта библиотеки на GitHub , распакуйте файлы и добавьте anime.min.js<script>html

 <script src="anime.min.js"></script>

В качестве альтернативы вы можете использовать npmbower

 npm install animejs

 bower install animejs

Добавление одной анимации к одному элементу: прыгающий шар

После того, как вы настроили Anime в своем проекте, вы можете начать с самого простого вида анимации: всего один элемент, шар, подпрыгивая вверх и вниз.

Первый шаг — вызвать anime Вот основная структура:

 var bouncingBall = anime({

  //code here
	
});

Затем вам нужно уточнить объект выше с некоторыми инструкциями о том, что анимировать, вид анимации, ее продолжительность и т. Д.

 var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic'
});

Свойство targets Здесь вы можете использовать селектор CSS, как я делал в приведенном выше примере, или любой из следующих:

 var bouncingBall = anime({
  targets: ['.ball', '.kick'],
  //rest of the code
});

 easing

 console.log(anime.easings);

 <style>

 .seek()

 var movingEyes = anime({
  targets: ['.inner-left-eye', '.inner-right-eye'],
  cy: 400,
  duration: 500,
  delay: function(el, index) {
    var singleDelay = index === 0 ? 300 : index * 500;
    return singleDelay;
  },
  autoplay: false
});