Начало работы с GreenSock Animation Platform

GreenSock Animation Platform (GSAP) позволяет вам анимировать все, что вы можете получить с помощью JavaScript, включая DOM, Canvas и CSS, а также свои собственные пользовательские объекты.

GSAP также помогает разрешить несогласованности браузера для более легкого тестирования пользователей, позволяет использовать объекты для управления сложной анимацией и работает до 20 раз быстрее, чем jQuery. Он стал стандартом в отрасли и использовался на бесчисленных удостоенных наград веб-сайтах.

 

01. Настройте базовый HTML-файл

Лучший способ узнать GSAP — увидеть его в действии. В этом уроке вы узнаете о ключевых особенностях платформы с рабочими примерами, которые вы можете использовать в своих проектах сегодня!

Начните с создания базового HTML-файла, где вы можете зайти в свой код JavaScript. Включите изображение с логотипом . Вы будете использовать GSAP для анимации свойств, чтобы увидеть, как это работает.

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

Затем вам нужно добавить GSAP в свой веб-проект. Между вашими и

03. Анимация с tweening

Tweening — это процесс изменения значения с течением времени для создания анимации. Например, перемещение объекта из A в B, его масштабирование или его вращение. Вы можете также настроить свои собственные значения.

Самый простой способ подстроить свойство — использовать функцию TweenMax.to () . Для этого требуется целевой объект, продолжительность и пары свойств / значений, которые вы анимируете. Чтобы увидеть функцию в действии, попробуйте выполнить каждую из строк кода ниже, используя логотип в качестве целевого объекта:

 // tween x position from current to 400 over 2 секунды TweenMax.to (". logo", 2, {x: 400}); // tween y position from current to 200 и opacity до 0, более 1 секунды TweenMax.to (". logo", 1, {y: 200, opacity: 0}); // tween x и y to 100, масштаб до 1,5 и поворот на 90 градусов, более 2 секунд TweenMax.to (". logo", 2, {x: 100, y: 100, масштаб: 1,5, вращение: 90}) 

04. Tween from and FromTo

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

 tweenMax.from ( «.logo», 2, {x: 400}), 

В этом случае ваш логотип немедленно переместится на x = 400 а затем на x = 0 . Вы можете даже определить начальное и конечное значения, игнорируя текущие значения с помощью fromTo () следующим образом:

 TweenMax.fromTo («. Logo», 2, {x : 400}, {х: 200}); 

05.

Ослабление — это «стиль» анимации, поскольку переход значений из От А до Б. Вместо постоянной скорости, которая называется «линейной», вы можете применять функции для кривой скорости. Они начинают медленно и постепенно ускоряться? Стоят ли они внезапно остановиться и немного подпрыгнуть в конце? В анимации эти стили добавляют характер и эмоции к вашей работе. Вы можете применить функцию ослабления следующим образом:

 TweenMax.to (". Logo", 2, {x: 100, y: 100, rotation: 90, ease: Circ.easeIn}); 

06. Ослабление функций и In / Out

GSAP включает в себя различные функции ослабления, такие как назад bounce упруго sin circ и ] экспо . Возможно, вы также заметили, что функция легкости обладает свойством easeIn который мы использовали на предыдущем шаге. Вы также можете использовать easeOut и easeInOut . Они указывают, где в анимации применяется кривая ослабления. Попробуйте следующие результаты:

 // Ослабление с помощью отскока TweenMax.to («. Logo», 2, {x: 100, y: 100, вращение: 90, легкость : Bounce.easeOut}); // Ослабление In и Out с эластичным TweenMax.to (". logo", 2, {x: 100, y: 100, вращение: 90, легкость: Эластичность.эксплуатация}); 

07 , Задержка анимации

Иногда вам нужно отложить начало анимации, либо синхронизировать ее с другой анимацией, либо заставить ее ждать появления события. Для этого вы можете использовать другие специальные свойства GSAP, названные delay . Попробуйте следующий код, чтобы узнать, как вы можете задерживать подростки для определенного времени:

 TweenMax.to («. Logo», 1, {y: 100, ease: Bounce.easeOut}); // Задержка этого твина на 1 сек. TweenMax.to (". logo", 1, {rotation: 90, ease: Circ.easeOut, delay: 1}); 

08. Функции обратного вызова

Чтобы интегрировать анимацию с вашим кодом, важно знать, когда происходят события, особенно когда анимация заканчивается или начинается. Для этого вы можете использовать обратный вызов события onComplete . Вы можете знать, когда начинается твин, используя onStart . И вы также можете синхронизировать свою анимацию с другой анимацией или использовать анимацию и ее ускорение для обновления некоторых других настраиваемых объектов. Для этого воспользуйтесь обратным вызовом onUpdate . Вот как вы используете обратный вызов:

 TweenMax.to («. Logo», 1, {y: 100, легкость: Bounce.easeOut, onComplete: tweenComplete}); function tweenComplete () {console.log ("tween complete"); } 

09. Параметры обратного вызова

При вызове обратных вызовов вы можете передавать информацию вместе с обратным вызовом функции, которая ее обрабатывает. Возможно, вам потребуется передать информацию об абоненте или конкретных значениях. Это позволяет интегрировать ваши анимации с остальной частью базы кода. Все параметры передаются через обратный вызов + «Парамс» то есть onUpdateParams .

В следующем примере вы можете отслеживать ход анимации с использованием ключевого слова {self} и может видеть, как передать несколько параметров с помощью массива:

 TweenMax.to (". logo", 1, {y: 100, ease: Bounce.easeOut, onUpdate : tweenUpdate, onUpdateParams: ["{self}",  "completed"]}); function tweenUpdate (tween, message) {var percent = tween. progress () * 100; // progress () - это значение 0-1 console.log (процент + "" + сообщение); } 

10. Управление анимацией

Итак, теперь вы можете создавать твины и улучшать твины, обратные вызовы и параметры огня. Но как вы контролируете анимацию? Часто вы хотите запустить или остановить их на основе других событий.

Если вам нужно остановить анимацию, вы можете использовать метод pause () . Если вы хотите возобновить анимацию, используйте resume () . Чтобы полностью уничтожить твин, используйте kill () . Попробуйте следующее:

 // var для ссылки на tween var tween = TweenMax.to (". Logo", 2, {y: 100, легкость: отскок. EaseOut }); // немедленно приостанавливать tween.pause (); // запускаем событие setTimeout (function () {tween. resume ()}, 1000); // обратная анимация в событии setTimeout (function () {tween. reverse ()}, 3000); 

11. CSS и CSSPlugin

CSSPlugin включен, когда вы использование TweenMax . Это огромная экономия времени, поскольку она нормализует поведение в браузерах и автоматически обнаруживает, когда это необходимо для анимации. CSSPlugin может обрабатывать цветные твины, анимацию SVG и оптимизированную производительность с кешированием и другими внутренними трюками — и часто более эффективно переводить позиции через CSS.

Вы уже видели это в действии, когда вы использовали opacity и анимации. Он работает без специального кодирования!

12. 2D и 3D-преобразования

Преобразования CSS позволяют масштабировать, вращать перевод и перекос. Они работают как в 2D, так и в 3D, чтобы быстро создавать красивые эффекты. GSAP включает встроенные свойства преобразования, такие как x y rotation rotationX rotationY skewX и шкала . Попробуйте применить следующую анимацию к вашему изображению, а не те, которые мы уже пробовали:

 TweenMax.to (". Logo", 3, {x: 100, y: 100, scale: 1.5 , rotationY: 360, легкость: Bounce.easeOut}); 

13. Timeline

После того, как вы перейдете за пределы одного или двух подростков, вы можете задаться вопросом, как управлять несколькими анимациями. GSAP включает объект чтобы сделать именно это. Вы добавляете подростки к объекту шкалы времени и можете использовать параметр после того, как они будут показаны на время. Вы можете работать подростками один за другим или иметь пробелы или даже перекрывать их. Добавьте еще несколько изображений в ваш HTML с классами logo2 и logo3 соответственно.

Чтобы посмотреть, как это работает, попробуйте следующий временной шкалу код:

 // создайте экземпляр временной шкалы var tl = new TimelineMax (); tl.add (TweenMax.to (". logo", 1, {x: 50})); // обратите внимание на окончательное «0», чтобы начать с 0 секунд. tl.add (TweenMax.to (". logo2", 1, {y: 100}), "0"); // обратите внимание на «+.25», чтобы этот запуск начинался с 0,25 секунды. tl.add (TweenMax.to («. logo3», 1, {rotationY: 180, y: 50, X: 50}), + .25 "), 

14. Контроль временной шкалы

Также, как и управление анимацией, вы также можете контролировать временные рамки. К счастью, вы можете сделать паузу, возобновить и обратить вспять, как вы можете, с анимацией. Вы также можете добавить параметры к временной шкале в repeat yoyo и добавить обратные вызовы для всей временной шкалы. Вы также можете управлять скоростью временной шкалы, используя свойство timeScale . Попробуйте заменить свое объявление временной шкалы на следующий код, чтобы увидеть, как он работает:

 var tl = new TimelineMax ({// повторяем бесконечное повторение: -1, yoyo: true,}); 

15. Получить и установить свойства

. Одна из полезных функций — получение и настройка свойств твинов и временных рамок. Таким образом, вы можете узнать общий прогресс и продолжительность или собрать другую информацию о объекте GSAP. В этом примере кода вы можете получить продолжительность временной шкалы, а затем установить свою продолжительность, чтобы изменить его. Это работает так же и для подростков. Это еще один отличный способ реагировать в реальном времени на события и изменять анимацию «на лету». Добавьте следующее после предыдущего кода временной шкалы:

 // получите текущую продолжительность временной шкалы console.log (tl.duration ()); // устанавливает продолжительность до 5 секунд после 2 секунд ожидания setTimeout (function () {tl.duration (5);}, 2000); 

Эта статья изначально была опубликована в приложении веб-дизайн журнала Web Designer. Купите номер 279 или подписываются .

Подробнее: