Початок роботи з платформою Greenensock

Платформа анімації Greensock (GSAP) дозволяє вам активувати все, що ви можете отримати доступ до JavaScript, включаючи Dom, Canvas та CSS, а також власні спеціальні об'єкти.

GSAP також допомагає вирішити невідповідність браузера для легше Тестування користувача (добре веб хостинг Також може допомогти тут), дозволяє використовувати об'єкти для керування складними анімаціями, а також закінчується до 20 разів швидше, ніж JQuery. Він став стандартним у галузі, і використовувався у безлічі нагородні веб-сайти. Отримав сайт побудувати? Ось наш гід кращий Веб-будівельник навколо.

01. Налаштуйте основний HTML-файл

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

Початок роботи, встановивши основний HTML-файл, де ви можете скинути код JavaScript. Включати зображення з a логотип клас. Ви будете використовувати GSAP для анімаційних властивостей, щоб побачити, як це працює.

 & lt; html lang = "en" & gt;
& lt; head & gt;
  & lt; стиль & gt;
    .logo {ширина: 150px; }
  & lt; / стиль & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; img class = "логотип"
src = "logo.svg" / & gt;
& lt; сценарій & gt;
// код тут
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Включіть бібліотеку GSAP

Далі потрібно додати GSAP до веб-проекту. Між вашим & lt; image & gt; і & lt; сценарій & gt; Теги, вставте посилання на бібліотеку GSAP. Ви можете завантажити ZIP безпосередньо з тут або захопити його Гуляк (Якщо у вас є файли, щоб поділитися, виберіть ідеальний хмара зберігання ). Файли також розміщені на Super-Fast CloudFlare CDN, тому найпростіший спосіб полягає у використанні, як це:

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & lt; / script & gt; 

03. Анімація з Tweening

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

Найпростіший спосіб tween Власність - це використовувати Tweenmax.to () функція. Це потребує цільового об'єкта, тривалість та пари власності / вартості, які ви анімаційні. Щоб побачити функцію в дії, спробуйте кожну з ліній коду нижче, використовуючи логотип як цільовий об'єкт:

 // tween x положення з поточного
до 400 більше 2 секунд
Tweenmax.to (". Логотип", 2, {x: 400});
// tween y положення від струму
до 200 і непрозорості до 0, понад 1
другий
Tweenmax.to (". Logo", 1, {y: 200, непрозорість: 0});
// tween x і y до 100, масштаб
1.5, і поворот 90 град, понад 2
другий
Tweenmax.to (". Логотип", 2, {x: 100, y: 100, шкала: 1.5, обертання: 90}); 

04. Твін від і від

Ви можете бути між властивістю від його поточного значення до нового використання до () , але ви також можете бути між від значення до його поточного значення. Наприклад, якщо ваш логотип починається з положення x 0 І ви хочете, щоб це закінчилося, ви могли це зробити:

 Tweenmax.FROM (". Логотип", 2, {x: 400}); 

У цьому випадку ваш логотип негайно перейде до x = 400 а потім tween x = 0 . Ви навіть можете визначити як значення початку, так і для завершення, ігноруючи поточні значення за допомогою від до() подобається це:

 tweenmax.fromto (". Логотип, 2, {x: 400}, {x: 200}); 

05. Пом'якшення

Пом'якшення - це "стиль" анімації, оскільки значення переходу від А до В. замість постійної швидкості, який називається "лінійним", ви можете застосувати функції, щоб крива швидкості. Чи починають вони повільно і поступово прискорюють? Чи приходять вони до різкої зупинки і відскокують трохи в кінці? У анімації ці стилі додають характер і емоцію до вашої роботи. Ви можете застосувати функцію ослаблення, як це:

 tweenmax.to (". Логотип", 2, {x: 100, y: 100, rosation: 90, легкість: circ.easein}); 

06. Полегшення функцій та вхід

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

 // Пом'якшення з відмовою
Tweenmax.to (". Logo", 2, {x: 100, y: 100, rosation: 90, легкість: bounce.epeast});
// пом'якшення і з еластичним
Tweenmax.to (". Логотип", 2, {x: 100, y: 100, rosation: 90, легкість: еластична. Eastinout}); 

07. Затримка між tween

Іноді ви захочете затримати початок анімації, або синхронізувати його з іншою анімацією, або щоб це чекати, коли ця подія. Ви можете використовувати іншу особливу властивості GSAP, які називаються затримка зробити це. Спробуйте наступний код, щоб побачити, як ви можете затримати Tweens для певного часу:

 tweenmax.to (". Logo", 1, {y: 100, легкість: bounce.epeast});
// затримка цього tween на 1 сек
Tweenmax.to (". Логотип, 1, {обертання: 90, легкість: circ.epeast, затримка: 1}); 

08. Функції зворотного виклику

Щоб інтегрувати анімацію з вашим кодом, важливо знати, коли відбуваються події, особливо коли анімація закінчується або починається. Ви можете використовувати напромонтувати зворотний виклик для цього. Можливо, ви захочете знати, коли почалося твін, використовуючи на . І ви також можете синхронізувати твіт з іншою анімацією, або використовувати Tween та його пом'якшення, щоб оновити інший користувацький об'єкт. Використовувати onupdate зворотний виклик для цього. Ось як ви використовуєте зворотний зв'язок:

 tweenmax.to (". Логотип", 1, {
Y: 100,
Легкість: відкидає
oncomplete: tweencomplete
});
Функція tweencomplete () {
Console.Log ("Tween Complete");
} 

09. Параметри зворотного дзвінка

Під час стрільби ви можете пройти інформацію разом з зворотним викликом до функції, яка її обробляє. Можливо, вам доведеться пройти інформацію про абонента або конкретні значення. Це дає змогу інтегрувати свої анімації з рештою вашої кодової бази. Всі параметри передаються через Callback + "парами" , це onupdateparams .

У наступному прикладі ви можете відстежувати прогрес tween за допомогою ключового слова {self} і може бачити, як пройти кілька параметрів за допомогою масиву:

 tweenmax.to (". Логотип", 1, {
Y: 100,
Легкість: відкидає
onupdate: tweenupdate,
onupdateparams: ["{self}",
"Завершено"]
});
Функція tweenupdate (tween,
повідомлення) {
var відсоток = tween.
Прогрес () * 100; // Прогрес ()
це значення 0-1
console.log (відсоток +
"" + повідомлення);
} 

10. Контроль анімації

Добре, так що ви можете тепер створити Tweens і полегшити Tweens, пожежні зворотні дзвінки та параметри. Але як ви контролюєте анімації? Часто ви хочете почати або зупинити їх на основі інших подій.

Якщо вам потрібно зупинити анімацію, ви можете використовувати Пауза () метод. Якщо ви хочете відновити tween, використовувати резюме() . Повністю знищити використання вбити () . Спробуйте наступне і подивіться, що відбувається:

 // VAR для утримання посилання на Tween
var tween = tweenmax.to (".
Логотип ", 2, {Y: 100, легкість: відмов.
leaseout});
// Негайно пауза
tween.pause ();
// Початок від події
etstimeout (функція () {tween.
резюме ()}, 1000);
// зворотна анімація на подію
etstimeout (функція () {tween.
зворотний ()}, 3000); 

11. CSS і CSSPLUGIN

CSSPlugin включений, коли ви використовуєте Tweenmax . Це величезна заставка, в тому, що вона нормалізує поведінку через браузери та автоматично виявляє, коли потрібно для анімації. CSSplugin може обробляти кольорові Tweens, анімації SVG та оптимізовану продуктивність з кешування та інших внутрішніх трюків, і це часто більш ефективні для перекладу позицій за допомогою CSS.

Ви вже бачили це в дії, коли ви використовували непрозорість і позиція анімації. Він працює без будь-якого спеціального кодування!

12. 2D та 3D перетворює

CSS Transformations дозволяють вам масштабувати, обертати перевести та перекосити. Вони працюють як 2D, так і 3D, щоб швидко створювати красиві ефекти. GSAP включає в себе вбудовані властивості трансформації, такі як х , y , обертання , ротаціякс , обертання , косо і масштаб . Спробуйте застосувати наступні tween до вашого зображення, а не з тих, які ми вже намагалися:

 tweenmax.to (". Логотип", 3, {
X: 100,
Y: 100,
Шкала: 1.5,
Обертання: 360,
Легкість: Bounce.epeast}); 

13. Термін дії

Після того, як ви виходите за межі одного або двох Tweens, вам може бути цікаво, як керувати кількома анімаціями. GSAP включає хронологія об'єкт, щоб зробити саме це. Ви додаєте tweens до хронологія об'єкт і може використовувати позиція параметр після tween time time. Ви можете мати Tweens запустити один за одним, або мати прогалини або навіть перекривати їх. Додайте ще кілька зображень до вашого HTML з класами логотип2 і логотип3 відповідно.

Щоб побачити, як це працює, спробуйте наступне хронологія Код:

 // Створення екземпляра
var tl = новий timelinemax ();
tl.add (tweenmax.to (". логотип", 1,
{x: 50}));
// Зверніть увагу на фінал "0", щоб зробити
це починається з 0 сек.
tl.add (tweenmax.to (". logo2", 1,
{y: 100}), "0");
// Зверніть увагу на "+.25", щоб зробити це
один почати .25 сек
tl.add (tweenmax.to (". logo3", 1,
{Rotationy: 180, Y: 50,
X: 50}), "+ 25"); 

14. Контроль хронології

А також контролюючі анімації, ви також можете контролювати терміни. На щастя, ви можете призупинити, резюме і зворотне, як ви можете з анімаціями. Ви також можете додати параметри до шкала повторити , йойо і додайте зворотні дзвінки за всю часову шкалу. Ви також можете керувати швидкістю хронології за допомогою термін майно. Спробуйте замінити декларацію про часову шкалу з наступним кодом, щоб побачити, як це працює:

 var tl = новий timelinemax ({{
// Повторіть нескінченно
Повторіть: -1,
yoyo: true,}); 

15. Отримайте та встановіть властивості

Одна особливість, яка дійсно корисна, є отримання та встановлення властивостей Tweens і термінів. Таким чином, ви можете дізнатися загальний прогрес і тривалість, або зібрати іншу інформацію про об'єкт GSAP. У цьому коді ви можете приїжджати Тривалість часової шкала, а потім набір його тривалість змінити його. Це працює те ж саме для Tweens. Це ще один чудовий спосіб реагувати в режимі реального часу до подій, а модифікувати анімацію на льоту. Додайте наступне після попереднього коду часового шкала:

 // Отримайте поточну тривалість
хронологія
console.log (tl.duration ());
// Встановлює тривалість до 5 секунд
Через 2 сек чекають
etstimeout (функція () {
tl.duration (5);
}, 2000); 

Ця стаття була опублікована в журналі Creative Web Design Web Designer. Купити проблему 279 або підписатися .

Читати далі:

• Навантажувач SVG анімації з GSAP
• Експортуйте анімації ефектів до HTML5
• Як створити анімації, що масштаб для всіх пристроїв