CSS анімації зручні, коли ви повинні зробити переходи властивостей в свої таблиці стилів. Плюс, вони показують фантастичну продуктивність з коробки - без додавання бібліотеки на сторінку. Однак, коли ви використовуєте переходи CSS, щоб привести в дію багатий проект руху (подібне ви побачите в останніх версіях IOS і Android), вони стають занадто важкими в управлінні, або їх функції просто сипляться помилками.
Velocity і GSAP
Якщо jQuery присутній на вашій сторінці, ви можете використовувати Velocity і GSAP точно так само як і $ .animate () jQuery. Наприклад, $ element.animate (
Ці дві бібліотеки також працюють, коли jQuery не присутній на сторінці. Це означає, що замість того, щоб об'єднати виклик анімації в ланцюжок в елемент jQuery об'єкта - як просто показано - ви передали б цільової елемент (и) до виклику анімації:
/ * Ці анімації автоматично стають ланцюжком. * /
Velocity # 40; element. # 123; opacity. 0.5 # 125 ;. 1000 # 41; ;
Velocity # 40; element. # 123; opacity. 1 # 125 ;. 1000 # 41; ;
У анімації цього шляху не бракує продуктивності (ви кешіруете елемент, аніміруемий до змінної, замість того, щоб неодноразово робити querySelectorAll вибірку для того ж елемента).
(Підказка: З пакетом Velocity UI ви можете створити свої власні анімації мультівизова і дати їм призначені для користувача імена, які зможете використовувати в подальшому як перший параметр Velocity. Див. UI Pack документацію Velocity для отримання додаткової інформації.)
Velocity виклик-обробки-за-один-раз, має величезну перевагу: якщо ви будете використовувати promises зі своїми Velocity анімаціями, то кожен Velocity виклик поверне дієвий promise об'єкт. Можна дізнатися більше про роботу з promises в статті Джейка Арчібальда. Вони неймовірно сильні.
У разі GSAP його виразний об'єктно-орієнтована API дозволяє вам розміщувати свої анімації в тимчасову шкалу, даючи вам контроль над плануванням та синхронізацією. ви не обмежені ланцюжковими анімаціями; можна вкласти тимчасові шкали, змусити анімації наложиться, і т.д .:
var tl = new TimelineMax # 40; # 41; ;
/ * GSAP вставляє проміжні кадри в ланцюжок за замовчуванням, але ви можете вказати точні точки вставки в терміни, в тому числі відносне зміщення. * /
tl
. to # 40; element. 1. # 123; opacity. 0.5 # 125; # 41;
. to # 40; element. 1. # 123; opacity. 1 # 125; # 41; ;
Анімація є по суті експериментальним процесом, в якому необхідно грати з timing та easing для отримання правильного відчуття, якого потребує додаток. Звичайно, навіть якщо ви будете вважати дизайн прекрасним, клієнт буде найчастіше вказують нетривіальні зміни. У цих ситуаціях керований workflow стає важливим.
У той час як CSS переходи досить просто вставити в проект для ефектів, таких як ширяння, вони стають некерованими, коли ви намагаєтеся упорядкувати навіть помірно складні анімації. Ось чому CSS забезпечує анімацію по ключовим кадрам, яка дозволяє вам групувати анімаційну логіку по розділах.
Однак базовий недолік API ключових кадрів - в тому, що ви повинні визначити розділи в процентах, яка не інтуїтивний. наприклад:
@ Keyframes myAnimation # 123;
0% # 123;
opacity. 0;
transform. scale # 40; 0. 0 # 41; ;
# 125;
25% # 123;
opacity. 1;
transform. scale # 40; 1. 1 # 41; ;
# 125;
50% # 123;
transform. translate # 40; 100px. 0 # 41; ;
# 125;
100% # 123;
transform. translate # 40; 100px. 100px # 41; ;
# 125;
# 125;
#box # 123;
animation. myAnimation 2.75s;
# 125;
Що відбувається, якщо клієнт просить, щоб ви зробили translateX анімацію на секунду довше? Це вимагає відновлення математики і зміни всіх (або більшості) відсотків.
У Velocity є свій UI пакет. щоб мати справу зі складністю мультіанімаціі, і GSAP пропонує nestable тимчасові шкали. Ці функції допускають повністю нові можливості потоку операцій.
Але давайте припинимо проповідь про потік операцій і зануримося в кумедні приклади анімації.
Утиліта фізики в проекті руху наштовхується на базовий принцип того, що робить для UX: інтерфейси, які природно пливуть від введення користувача - іншими словами, інтерфейси, які дотримуються руху подібного реального світу.
GSAP пропонує фізики плагіни, які адаптуються до обмежень призначеного для користувача інтерфейсу. Наприклад, ThrowPropsPlugin відстежує динамічну швидкість пальця користувача або миші, і коли користувач відпускає, ThrowPropsPlugin вибирає відповідну швидкості і змушує елемент природно зупинитися. Що виходять анімація - стандартний проміжний кадр, який може управлятися часом (який був загальмований, інвертований, і т.д.):
Velocity пропонує тип спрощення на основі фізики пружності. Зазвичай зі спрощенням опцій ви передаєте в іменованому типі спрощення; наприклад, ease. ease-in-out або easeInOutSine. З фізикою пружності ви передаєте масив з двома елементами, що складається з сили і значень тертя (в дужках нижче):
Velocity # 40; element. # 123; left. 500 # 125 ;. # 91; 500. 20 # 93; # 41; ; // 500 натяг, 20 тертя
CSS анімація перетворюється одним компонентом, масштаб, переворот, обертання і перспектива - містяться в єдиному властивості CSS і отже не можуть бути анімовані незалежно, використовуючи різну тривалість, параметри і затримку анімації.
І Velocity і GSAP дозволяють індивідуально анімувати перетворювати компоненти:
// GSAP
/ * First animation * /
TweenMax. to # 40; element. 1. # 123; x. 500 # 125; # 41; ;
/ * Trigger a second (concurrent) animation after 500 ms * /
TweenMax. to # 40; element. 2. # 123; rotation. 45. delay. 0.5 # 125; # 41; ;