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

В минулій статті ми почали розмову про анімування без використання jQuery - розглянули інструменти та основи їх використання. Сьогодні наша розмова піде про приклади використання даного типу анімацій.
 

Робочий процес

Анімація, по суті, експериментальний процес, в якому необхідно грати з затримками і затуханнями , щоб отримати саме те, що, на вашу думку, потрібно для додатка. Звичайно, навіть коли ви думаєте, що дизайн ідеально підходить, клієнти часто просять нетривіальних змін. В таких ситуаціях, керований бізнес-процес стає критичним.

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

Однак, основний недолік keyframes API полягає в тому, що ви повинні визначити розділи у відсотках. Наприклад:

@keyframes myAnimation {
   0% {
      opacity: 0;
      transform: scale(0, 0);
   }
   25% {
      opacity: 1;
      transform: scale(1, 1);
   }
   50% {
      transform: translate(100px, 0);
   }
   100% {
      transform: translate(100px, 100px);
   }
}
#box {
   animation: myAnimation 2.75s;
}

Що відбудеться, якщо клієнт попросить Вас зробити translateX анімацію на 1 секунду довше? Потрібно буде переробити математику і змінити всі (або більшість) відсоткових значень.

Velocity має свій UI pack для вирішення проблем з multi-анімаціями, GSAP пропонує використовувати для цього часову шкалу. Ці функції відкривають абсолютно нові можливості робочого процесу.

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

Фізика

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

Утиліта фізики робить велику роботу - створює ефект натуральності, який може бути досягнутий тільки з JS.

GSAP пропонує плагіни фізики, що адаптуються до обмежень інтерфейсу. Наприклад, ThrowPropsPlugin - плагін динамічної швидкості руху пальця або миші. Коли користувач відпускає елемент, ThrowPropsPlugin створює ефект природного зниження швидкості і зупинки елемента.

See the Pen dABtu by Codeguida (@codeguida) on CodePen.

Velocity пропонує затухання типу на основі spring фізики. Як правило, з допомогою параметрів уповільнення ми передаємо назву типу затухання; наприклад, ease, ease-in-out або easeInOutSine. Вам потрібно передати масив з двох елементів: напруги та величини тертя:

Velocity(element, { left: 500 }, [ 500, 20 ]); 

Більш висока напруга (за замовчуванням 500) збільшує загальну швидкість і пружність. Менше тертя (за замовчуванням 20) збільшує швидкість закінчення вібрації. Змінюючи ці параметри, ви можете налаштувати вашу анімацію. Спробуйте:

See the Pen Velocity.js - Easing: Spring Physics (Tester) by Julian Shapiro (@julianshapiro) on CodePen.

Прокрутка

В Velocity, ви можете надати користувачу можливість прокручувати сторінку браузера до певного елемента, передаючи scroll, як швидкість першого аргументу (замість властивості map). scroll команда веде себе ідентично стандартному виклику Velocity; він може приймати параметри і може бути поставлений в чергу.

Velocity(element, "scroll", { duration: 1000 };

See the Pen Velocity.js - Command: Scroll w/ Container Option by Julian Shapiro (@julianshapiro) on CodePen.

Ви можете прокручувати елементи всередині контейнерів, також є можливість прокручування по горизонталі. Детальніше про прокрутку Velocity.

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

Реверс

Velocity і GSAP мають реверсні команди, які дозволяють проанімувати елемент назад до значень останньої анімації.

В Velocity, вкажіть reverse, як перший аргумент:

Velocity(element, "reverse", { duration: 500 });

See the Pen Velocity.js - Command: Reverse by Julian Shapiro (@julianshapiro) on CodePen.

У GSAP, ви можете зберегти анімацію об'єкта, а потім викликати reverse() метод в будь-який час:

var tween = TweenMax.to(element, 1, {opacity:0.5});
tween.reverse();

Управління трансформацією

З CSS-анімації, всі перетворення компонентів - масштаб, переміщення, поворот і нахил - містяться в одній CSS-властивості і, отже, не можуть бути анімовані самостійно, використовуючи різну тривалість і час початку.

Незалежний контроль є необхідним. Давайте розглянемо динамічні перетворення з допомогою JavaScript. Натисніть на кнопку у будь-який момент:

See the Pen Independent Transforms by GreenSock (@GreenSock) on CodePen.

У Velocity та GSAP можна окремо анімувати перетворення компонентів:

// Velocity
Velocity(element, { translateX: 500 }, 1000);
Velocity(element, { rotateZ: 45 }, { delay: 500, duration: 2000, queue: false });
// GSAP
TweenMax.to(element, 1, { x: 500 });
TweenMax.to(element, 2, { rotation: 45, delay: 0.5 });

Висновок

• Порівняно з CSS-анімаціями, JavaScript анімації мають кращу браузерну підтримку і, як правило, більше можливостей Це забезпечує більший контроль;

• Вам не потрібно використовувати jQuery, щоб скористатися JavaScript бібліотекою анімацій.

Джерело