Анімація без jQuery ч.1

Існує помилкове переконання серед web-розробників, що CSS-анімації - єдиний ефективний спосіб створення анімацій для web. Цей міф має примусив багатьох девелоперів відмовитися від JavaScript-анімацій. Це є великим недоліком, тому що:

1. потрібно керувати складною взаємодією з інтерфейсом користувача в стилях;

2. це блокує вас від підтримки IE 8, 9;

3. ви відмовляєтесь від красивого анімаційного дизайну, фізики, всього, що стає можливим тільки з допомогою JavaScript.

Анімація на основі JavaScript, як правило, така сама за швидкістю, як і CSS- анімації, а іноді навіть швидше. При використанні CSS-анімації нам дуже часто потрібно використовувати jQuery $.animate(), який є, по суті, дуже повільним. Однак JavaScript бібліотеки анімацій працюють в обхід jQuery, уникаючи DOM маніпуляції. Ці бібліотеки можуть бути до 20 разів швидше, ніж jQuery.

Давайте розвіємо деякі міфи і зануримося в реальні приклади анімації і, в процесі, поліпшимо наші навички проектування. Якщо ви любите створювати анімації для користувальницького інтерфейсу, то ця стаття для вас.

Чому JavaScript

CSS анімації - дуже зручний інструмент, вони забезпечують фантастичну продуктивність " з коробки ". Однак, при використанні CSS-переходів для потужного моушн-дизайну ( який ви бачите в останніх версіях iOS і Android), вони стають занадто складними для керування, також відчувається брак функціоналу.

У кінцевому рахунку, CSS-анімації обмежують вас Специфікацією. В JavaScript, як і в будь-якій мові програмування, у вас є нескінченна кількість логічних елементів управління. В JavaScript анімації використовується цей факт для відтворення деяких дуже корисних прийомів:

1. Крос-браузерна SVG підтримка;

2. Фізика на основі завантажувача анімації;

3. Часовий контроль;

4. Шкала часу.

Velocity і GSAP

Дві найпопулярніші JavaScript бібліотеки анімацій: Velocity.js і GSAP. Обидві працюють з і без jQuery. Коли ці бібліотеки використовуються поряд з jQuery, немає зниження продуктивності, так як вони працюють в обхід анімаційного jQuery стека.

Якщо jQuery присутній на вашій сторінці, ви можете використовувати Velocity.js і GSAP так само як і jQuery $.animate(). Наприклад, $element.animate({ opacity: 0.5 }) просто стає $element.velocity({ opacity: 0.5 }).

Ці дві бібліотеки працюють тоді, коли jQuery не присутній на сторінці. Це означає, що замість ланцюжка: анімація - jQuery, ви б передавати цільовий елемент анімації.

    /* працюємо без jQuery */
    
    Velocity(element, { opacity: 0.5 }, 1000); // Velocity
    
    TweenMax.to(element, 1, { opacity: 0.5 }); // GSAP

Як ви бачите, Velocity зберігає той же синтаксис, що і jQuery $.animate(), навіть коли використовується без jQuery; просто змістіть всі аргументи вправо на одну позицію, щоб звільнити місце для проходження цільових елементів на перші позиції.

GSAP, навпаки, використовує об'єктно-орієнтований API дизайн, а також зручні статичні методи. Так, ви можете отримати повний контроль над анімацією.

В обох випадках, ви більше не анімуєте jQuery елемент object, а виконуєте цю дію для raw-DOM-вузла. В якості нагадування, ви можете отримати доступ до raw- DOM-вузлів за допомогою document.getElementByID, document.getElementsByTagName, document.getElementsByClassName або document.querySelectorAll (який працює аналогічно jQuery selector engine). Ми опрацюємо ці функції в наступному розділі.

Працюємо без jQuery

(Примітка: якщо вам потрібен базовий підручник по роботі з jQuery $.animate(), див. перші кілька розділів документації Velocity.)

Давайте розглянемо querySelectorAll, тому що він, швидше за все, буде нашою зброєю при виборі елементів без jQuery:

    document.querySelectorAll("body"); // отримуємо елемент body
    document.querySelectorAll(".squares"); // отримуємо всі елементи, для яких вказано клас "square"
    document.querySelectorAll("div"); // отримуємо всі div
    document.querySelectorAll("#main"); // отримуємо всі елементи з id "main"
    document.querySelectorAll("#main div"); // отримуємо всі div, котрі вміщують "main"

Як видно, ви просто передаєте querySelectorAll селектори CSS (ті ж селектори можна використовувати в таблицях стилів), і вона поверне всі співпадаючі елементи в масив. Отже, ви можете зробити це:

    /* отримуємо всі елементи div */
    var divs = document.querySelectorAll("div");
    
    /* анімуємо всі div за раз */
    Velocity(divs, { opacity: 0.5 }, 1000); // Velocity
    TweenMax.to(divs, 1, { opacity: 0.5 }); // GSAP

Тому як ми більше не прикріплюємо анімації до jQuery об'єктів, вам буде цікаво дізнатися, як ми можемо об'єднувати анімації:

    $element // елемент об'єкта jQuery
    	.velocity({ opacity: 0.5 }, 1000)
    	.velocity({ opacity: 1 }, 1000);

У Velocity, ви просто викликаєте анімації одна за іншою:

    /* ці анімації автоматично з'єднаються одна з одною */
    Velocity(element, { opacity: 0.5 }, 1000);
    Velocity(element, { opacity: 1 }, 1000);

Анімація цим способом не викликає падіння продуктивності.

(Примітка: з допомогою Velocity UI pack, ви можете створити свії власні мульти-виклики анімації і давати їм власні імена, на які згодом можна посилатися, як на перший аргумент Velocity. Дивитися документацію Velocity UI pack для отримання додаткової інформації.)

Процес call-at-a-time має величезну перевагу: якщо ви використовуєте "обіцянки" Velocity, то кожен виклик Velocity поверне дієвий об'єкт обіцянки. Це неймовірно потужний інструмент.

У разі GSAP, його API дозволяє розміщувати ваші анімації в графік, даючи вам контроль над плануванням і синхронізацією. Ви не обмежені анімаціями об'єднаними в ланцюг (одна за іншою). Можна вкладати графіки, робити анімацію перекриття, і т.д.:

    var tl = new TimelineMax();
    /* GSAP анімації є "ланцюгом" за замовчуванням, але ви можете вказати точне вставки пунктів в шкалі, у тому числі з відносними переміщеннями. */
    tl
      .to(element, 1, { opacity: 0.5 })
      .to(element, 1, { opacity: 1 });