Анімація без 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 створює ефект природного зниження швидкості і зупинки елемента.

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

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

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

Прокрутка

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

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

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

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

Реверс

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

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

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

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

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

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

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

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

У 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 бібліотекою анімацій.