GreenSock Animation Platform (GSAP) позволяет оживить все, что вы можете получить доступ к JavaScript, включая DOM, Canvas и CSS, а также свои собственные пользовательские объекты.
GSAP также помогает разрешить несоответствия браузера для более легкого
Тестирование пользователей
(хороший
веб хостинг
Может помочь здесь тоже), позволяет использовать объекты для управления сложными анимацией и прогонте до 20 раз быстрее, чем jQuery. Он стал стандартом в отрасли и использовался в бесчисленных наградах веб-сайтов. Получил сайт, чтобы построить? Вот наш гид к лучшему
Строитель сайта
вокруг.
Лучший способ выучить GSAP - это увидеть его в действии. В этом руководстве вы узнаете о ключевых функциях платформы с рабочими примерами, которые вы можете использовать в своих проектах сегодня!
Начните, создавая базовый файл HTML, где вы можете бросить код JavaScript. Включить изображение с
логотип
учебный класс. Вы будете использовать GSAP для анимации свойств, чтобы увидеть, как он работает.
& lt; html lang = "en" & gt;
& lt; head & gt;
& lt; Стиль & gt;
.Logo {Ширина: 150px; }
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; img class = "logo"
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 напрямую от
здесь
или схватить его
Гадость
(Если у вас есть файлы, чтобы поделиться, выберите идеальный
облачное хранилище
). Файлы также размещены на CDN Super-Fast Columflare, поэтому самый простой способ - использовать такие файлы, как это:
03. Анимация с Tweening
Tweening - это процесс изменения значения с течением времени, чтобы создать анимацию. Например, перемещение объекта от A до B, масштабирование его или вращающегося его. Вы также можете третизировать свои собственные ценности.
Самый простой способ TWEN A имущество - использовать
Tweenmax.to ()
функция. Это нужен целевой объект, продолжительность и пары свойства / значения, которые вы анимаете. Чтобы увидеть функцию в действии, попробуйте каждый из строк кода ниже, используя
логотип
Как целевой объект:
// Твин X Положение из тока
до 400 более 2 секунд
Tweenmax.to (". Logo", 2, {x: 400});
// Двинена позиция от тока
до 200 и непрозрачность до 0, более 1
второй
Tweenmax.to (". Logo", 1, {y: 200, непрозрачность: 0});
// Theen X и Y до 100, масштаб к
1.5, и вращайте 90oC, более 2
второй
Tweenmax.to (". Logo", 2, {x: 100, y: 100, масштаб: 1.5, вращение: 90});
04. Твин из и из
Вы можете определить как начальные и конечные значения для Tweening
Вы можете между его текущей стоимостью, используя
к()
, но вы также можете истина
из
значение для его текущего значения. Например, если ваш
логотип
начинается в положении x
0.
И вы хотите, чтобы это был там, вы могли бы сделать это:
Tweenmax.from (". Logo", 2, {x: 400});
В этом случае ваш логотип немедленно перейдет на
x = 400.
а затем три
х = 0.
Отказ Вы даже можете определить как начальные, так и конечные значения, игнорируя текущие значения, используя
от до()
так:
Облегчение - это «стиль» анимации, в качестве значения перехода от A до B. Вместо постоянной скорости, которая называется «линейным», вы можете применить функции для кривой скорости. Они начинают медленно и постепенно ускоряются? Они приходят к резкой остановке и немного отскочить в конце? В анимации эти стили добавляют характер и эмоции к вашей работе. Вы можете применить функцию ослабления, как это:
GSAP включает в себя различные функции ослабления, такие как
назад
,
подпрыгивать
,
эластичный
,
греха
,
порка
, и
Экспо
Отказ Возможно, вы также заметили, что
простота
Функция имеет свойство
ослаблять
, который мы использовали на шаге выше. Вы также можете использовать
легкость
и
бездействие
Отказ Они указывают на то, что кривая ослабления применяется в анимации. Попробуйте следующее, чтобы увидеть результаты:
Иногда вы захотите задержать начало анимации, либо для синхронизации его с другой анимацией, либо заставить его дождаться, когда произойдет событие. Вы можете использовать еще одно специальные свойства GSAP
задерживать
сделать это. Попробуйте следующий код, чтобы увидеть, как вы можете задержать Tweens для конкретных синхронизации:
Чтобы интегрировать анимацию с вашим кодом, важно знать, когда события происходят, особенно когда анимация заканчивается или начинается. Вы можете использовать
одолеть
Обратный вызов события для этого. Вы можете узнать, когда начинается Tween, используя
onstart.
Отказ И вы также можете синхронизировать вашу твин с другой анимацией или использовать Tween и его ослабление для обновления другого пользовательского объекта. Использовать
onUpdate.
Обратный вызов для этого. Вот как вы используете обратный вызов:
При вызове вызовов вы можете пройти информацию вместе с обратным вызовом к функции, которая ее обрабатывает. Возможно, вам придется пройти информацию о вызывающем звоняще или конкретных значениях. Это позволяет интегрировать ваши анимации с остальной частью вашей кодовой базы. Все параметры передаются через
Обратный вызов + «Пармы»
, то есть
OnUpdateParams.
Отказ
В следующем примере вы можете отслеживать прогресс в Твине, используя ключевое слово
{себя}
И можно увидеть, как пройти несколько параметров, используя массив:
Tweenmax.to (". Logo", 1, {
Y: 100,
Легкость: откажется.
Onupdate: TweenUpdate,
OnupdateParams: [«{Self}»,
"завершенный"]
});
Функция TweenUpdate (Tween,
сообщение) {
VAR процент = твин.
прогресс () * 100; // прогресс()
это значение 0-1
console.log (процент +
«+ сообщение);
}
10. Контроль анимации
Итак, теперь вы можете создать Tweens и облегчить подростковые, пожарные обратные вызовы и параметры. Но как вы управляете анимацией? Часто вы хотите начать или остановить их на основе других событий.
Если вам нужно остановить анимацию, вы можете использовать
Пауза()
метод. Если вы хотите возобновить Tween, используйте
продолжить()
Отказ Чтобы полностью уничтожить однократное использование
убийство()
Отказ Попробуйте следующее и посмотрите, что произойдет:
// var для хранения ссылки на §
var tween = tweenmax.to (".
Логотип ", 2, {y: 100, легкость: отказов.
легкость});
// пауза немедленно
Tween.pouse ();
// начать на событии
Settimeout (Функция () {Tween.
резюме ()}, 1000);
// Обратная анимация на событии
Settimeout (Функция () {Tween.
Обратный ()}, 3000);
11. CSS и CSSPLUGIN
CSSPLUGIN Auto-обнаруживает, когда он необходим для анимации
CSSPLUGIN включен при использовании
Tweenmax.
Отказ Это огромное время застройки времени, в том, что он нормально нормает поведение в браузерах и автоматически обнаруживает, когда он необходим для анимации. CSSPLUGIN может обрабатывать цветные брюки, анимации SVG и оптимизировали производительность с кэшированием и другими внутренними хитростями - и часто более эффективно для перевода позиций через CSS.
Вы уже видели это в действии, когда вы использовали
непрозрачность
и
позиция
анимация. Это работает без какого-либо специального кодирования!
12. 2D и 3D преобразования
GSAP включает в себя встроенные преобразования, которые позволяют расширить, вращать перевод и перекоснуть
Преобразования CSS позволяют вам масштабироваться, вращать перевод и перекоснуть. Они работают как в 2D, так и в 3D, чтобы быстро создавать красивые эффекты. GSAP включает в себя встроенные свойства преобразования, такие как
Икс
,
уход
,
вращение
,
Rotationx.
,
вращение
,
поток
и
шкала
Отказ Попробуйте применить следующий третий на свой образ вместо тех, которые мы уже попробовали:
Объект временной шкалы GSAP позволяет управлять несколькими анимациями
После того, как вы пройдете за пределы одного или двух подростков, вам может задаться вопросом, как управлять несколькими анимациями. GSAP включает в себя A.
график
объект, чтобы сделать именно это. Вы добавляете Tweens к
график
объект и может использовать
позиция
Параметр после тренажера их. Вы можете иметь Tweens один за другим или иметь пробелы или даже перекрывать их. Добавьте пару больше изображений на ваш HTML с классами
logo2.
и
logo3.
соответственно.
Чтобы увидеть, как это работает, попробуйте следующее
график
код:
// Создать экземпляр временной шкалы
var tl = новый 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,
Х: 50}), "+. 25");
14. Контроль времени
А также контролирующие анимации, вы тоже можете контролировать сроки. К счастью, вы можете приостановить, возобновить и обратно так же, как вы можете с анимацией. Вы также можете добавить параметры на временную шкалу, чтобы
повторение
,
йо Йо
и добавьте обратные вызовы для всей временной шкалы. Вы также можете контролировать скорость временной шкалы, используя
срочный
свойство. Попробуйте заменить объявление вашей временной шкалы следующим кодом, чтобы увидеть, как он работает:
var tl = новый timelinemax ({{{{
// повторить бесконечно
Повторить: -1,
yoyo: true,});
15. Получить и установить свойства
Одной из функций, которая действительно полезна, является получение и установление свойств Tweens и TimeLines. Таким образом, вы можете узнать общий прогресс и продолжительность, или соберите другую информацию о объекте GSAP. В этом примере кода вы можете
получать
Продолжительность временной шкалы, а затем
набор
его продолжительность, чтобы изменить его. Это работает так же для Tweens. Это еще один отличный способ реагировать в режиме реального времени на события и изменить анимацию на лету. Добавьте следующее после вашего предыдущего кода Timeline:
// получить текущую продолжительность
Сроки
console.log (tl.duration ());
// устанавливает продолжительность до 5 секунд
После 2 секунд ожидания
Settimeout (Функция () {
TL.duration (5);
}, 2000);
