Анімація DOM за допомогою Anime.js

{full-post-img}

Якщо ви в пошуках швидкої та маленької бібліотеки для анімації, то Anime.js саме те, що вам потрібно.

Оживляючи веб

Як підмітила Sarah Drasher, анімація ділиться на UI/UX анімацію і самостійну.

Дослідження доводять, що ми краще усвідомлюємо інтерактивну сцену, ніж статичне зображення чи серію статичних зображень.

UI/UX анімації допомагають користувачам виконати якусь дію, наприклад, додати товар в кошик чи підписатися на розсилку.

Самостійна анімація ж навпаки використовується для ілюстрації концепту сторінки в цілому, а не для окремих дій.

Ось класний CodePen для ілюстрації різниці:

Таке розділення насправді дуже важливе, адже UI/UX анімації використовуються щоб допомогти користувачу виконати дії, що є цілю сайту. Самостійні анімації навпаки допомагають користувачу зрозуміти концепти і філософію сервісу.

Обидва види анімації створюються для людей і їх зручності, тому саме доступність та плавне виконання відрізняють гарну анімацію від поганої.

Чому JavaScript?

Сьогодні CSS надає багато можливостей для здійснення анімацій та переходів, але JavaScript все ще утримує чималу долю в веб-анімаціях. Чому?

Анімація буває різною:

• Статичною: запускається відразу, без всякої логіки. Гарним прикладом статичної анімації є прелодери.

• Зі збереженням стану: сайдбар, що відкривається і закривається по кліку. Такі анімації роблять на CSS і трішки JS, що додати та прибрати потрібні класи при кліку.

• Динамічні: вид анімацій, виконання яких залежить від багатьох факторів, наприклад, дії користувача, події в DOM, стану анімації інших компонентів. Для таких анімацій CSS недостатньо, тут ваш найкращий друг - JavaScript.

Окрім динамічних анімацій JS використовується й для вирішення наступних проблем:

• Створення ланцюжка анімацій на різних елементах. Це також можна зробити й на CSS, але на JavaScript виходить простіше й легше адаптувати в майбутньому.

• Анімація SVG-графіки. Анімація SVG за допомогою CSS підтримуються ще не досить добре.

• Підтримка старих браузерів, де CSS-анімації не працюють.

Для детальнішого ознайомлення можете почитати: Myth Busting: CSS Animations vs. JavaScript

Майбутня альтернатива: Web Animations API

W3C працює над специфікацією, що поєднує CSS, SVG та JavaScript анімації в уніфіковану мову, без потреби в додаткових JS-бібліотеках. Цей API має назву Web Animation.

Введення в WAAPI

Також, для браузерів що не мають підтримки нового API, є поліфіл.

Це все звучить круто, але є одна велика проблема. На момент написання WAAPI ще дуже погано підтримується браузерами.

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

Зазвичай, при виборі бібліотеки для анімацій на думку спадають GreenSock (GSAP, GreenSock Animation Platform) та Velocity.js, найбільш популярні бібліотеки.

Вони обидві фантастичні, дружні до користувача, але я б хотів познайомити вас з Anime.js.

Головні фічі Anime.js

Anime.js - гнучка і в той же час легка бібліотека для анімацій. Вона працює з CSS, індивідуальними трансформаціями, SVG, атрибутами DOM та JS-об'єктами. Вона підтримується наступними браузерами:

• Chrome

• Safari

• Opera

• Firefox

• Internet Explorer 10+

Чому саме anime.js?

Найкращою відповіддю на це питання буде цитата автора Anime.js:

GSAP має набагато більше можливостей ніж Anime, але в той же час він набагато важчий. Моєю метою було написати легку бібліотеку з простим API і фокусом на тих речах, що мені дійсно необхідні.

Як використовувати Anime.js

Підключення Anime.js не складніше за підключення jQuery.

Завантажте .zip-архів з сторінки проекту на GitHub, видобудьте та додайте файл anime.min.js до вашого html:

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

Можете використати npm чи bower:

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-селектор (як я зробив в прикладі), або

• Елемент DOM (document.querySelector('.ball'))

• Nodelist (document.querySelectorAll('.ball'))

• JavaScript об'єкт ({elementName: 'ball'})

• JavaScript масив (['.ball'])

Другий параметр переміщує наш мячик по вертикалі за допомогою translateY, що еквівалентний йому ж в CSS.

Наступна в списку властивість duration, вона вказує з якою швидкістю слід програвати анімацію.

Властивість loop вказує anime скільки разів програвати анімацію. За умовчуванням вона дорівнює false, тобто анімація програється лише раз. Ви можете зробити анімацію безкінечною, вказавши тут true, або програти її задану кількість разів, вказавши число.

direction вказує в якому напрямку програвати анімацію. Доступні значення як і в CSS: normal, reverse та alternate. Останнє дозволяє програвати анімацію спочатку в нормальному напрямку, а потім в реверсивному. Для м'ячика те що треба!

І нарешті, опція easing, що закінчує наш код. Наша анімація рівномірна? Ні, анімація спочатку повільна і стає швидшою під кінець. Саме за швидкість зміни стану анімації відповідає цей параметр. Ви можете отримати всі доступні значення виконавши

console.log(anime.easings);

Додання ще однієї анімації

Що, якщо ви хочете щоб ваш мячик трішки стискався при приземленні? Ви можете зробити це з anime, використовуючи специфічні патерни анімації. Якщо показати на прикладі мячика, то вийде щось таке:

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic',
  //новий код
  scaleX: {
    value: 1.05,
    duration: 150,
    delay: 268
  }
});

В цьому коді додана властивість scaleX, що трохи збільшує ширину мячика, її значенням є спеціальний об'єкт, в якому ви описуєте дану анімацію.

Властивість value вказує наскільки слід розширити елемент, а duration та delay вказують довжину та затримку перед програванням анімації

Якщо ви подивитесь що відбувається, використовуючи інструменти розробника, ви побачите, що anime динамічно змінює CSS-властивості елемента:

Анімація двух елементів: удар по мячу

Цей простий код показує як послідовно анімувати два елементи.

var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  easing: 'easeInCubic',
  complete: function() {
    anime({
      targets: '.ball',
      translateX: '70vw',
      scale: 1.5,
      easing: 'easeOutBounce',
      delay: 150
    });
  }
});

Мяч анімується лише після того, як по ньому ударять. З Anime.js ви можете змусити мяч качатися за допомогою властивості complete, що містить в собі ще один об'єкт anime.

В даному випадку вам навіть не обов'язково використовувати JS, це саме можна зробити на чистому CSS:

Запуск, пауза та перезапуск анімації

Anime.js дозволяє вам контролювати анімацію за допомогою методу .play(), .pause(), .restart(). Ви також можете знайти певну точку анімації за допомогою метода .seek().

Ось так ви можете контролювати анімацію удара по мячу:

//Анімація удару
var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  delay: 100,
  easing: 'easeInCubic',
  autoplay: false
});

//Анімація мяча
var movingBall = anime({
  targets: '.ball',
  translateX: '70vw',
  scale: 1.5,
  easing: 'easeOutBounce',
  delay: kickBall.duration + 100,
  autoplay: false
});

/* Запуск анімації по кліку на кнопку*/
btnPlay.addEventListener('click', function(e) {
  e.preventDefault();
  kickBall.play();
  movingBall.play();
});

Декілька зауважень до коду вище:

• Щоб мати можливість контролювати обидві анімації, я виділив їх в окремі об'єкти. Як показує досвід, при використанні вкладених анімацій кнопка буде контролювати лише головну анімацію, не зважаючи на вкладені.

• Щоб не програвати ваші анімації відразу після завантаження сторінки, слід використовувати autoplay: false.

Анімація інлайн атрибутів SVG за допомогою Anime.js

Останнє наше демо ілюструє анімацію інлайнової SVG-графіки (в даному випадку милого котика, що грається з м'ячиком).

В демо ми присвоїли деяким фігурам та шляхам в SVG класи, щоб легко звертатися до них з JS-коду.

Ось так можна анімувати котику очі:

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
});

Цей код модифікує властивість cy, що змушує кота рухати очима.

До речі, delay може бути не лише числом, а й функцією. В функцію передається порядковий номер елемента, який ми використовуємо щоб встановити затримку: якщо це перший елемент, тобто ліве око, то затримка 300 мс, якщо праве — 500 мс.