GSAP — это мощная, обратно совместимая, производительная и зрелая библиотека анимации JavaScript, которая позволяет вам анимировать практически все в Интернете — например, элементы DOM, объекты JS, SVG, свойства CSS и т. д. Мы рассмотрели GSAP ранее, например, в нашей серии для начинающих и руководстве по плагинам, и мы большие поклонники.
Его интуитивно понятный синтаксис дает разработчикам возможность создавать умопомрачительные анимационные эффекты за относительно короткое время и с минимальным объемом кода.
В этой статье я расскажу о некоторых замечательных новых функциях GreenSock 3 и расскажу вам, как их использовать, чтобы ускорить работу в Интернете.
Что нового в GreenSock 3
Больше возможностей и меньший размер файлов
GreenSock был перестроен с нуля с использованием модулей ES6. Он
Сжатый синтаксис для быстрого кодирования
Если вы
Например, теперь вам не нужно решать, хотите ли вы использовать TweenLite или TweenMax, TimelineLite или TimelineMax. Есть только один объект, gsapобъект:
// tween
gsap.to (selector, {})
// timeline
const tl = gsap.timeline ()
Кроме того, durationбольше не является параметром методов to (), from () или fromTo (), а устанавливается внутри varsобъекта. В частности, старый
TweenMax.to (selector, 1, {})
становится
gsap.to (selector, {
duration: 1
})
Гораздо более читаемый, а также гибкий. Фактически, теперь вы можете установить duration, например, использование функции.
Еще один плюс этого нового, упрощенного API заключается в том, что ошеломляющие анимации очень просты в кодировании. Нет необходимости использовать старые методы staggerTo (), staggerFrom () и staggerFromTo (), потому что вы можете добавлять ступени прямо в varsобъект обычных твинов:
gsap.to (selector, {
x: 50,
duration: 1,
stagger: 0.5
})
Для большей гибкости вы можете использовать
gsap.to (selector, {
x: 50,
duration: 1,
stagger: {
amount: 2,
from: 'center’
}
})
Наконец, упрощения GSAP всегда были потрясающими, но немного многословными. Не сейчас. GreenSock 3 поставляется с более кратким и удобочитаемым синтаксисом для настройки замедления. Например, вместо:
Elastic.easeOut
Elastic.easeIn
Elastic.easeInOut
вы просто пишете:
'elastic’ // same as 'elastic.out’
'elastic.in’
'elastic.inOut’
Еще одно упрощение состоит в возможности замены меток <символом, указывающим время начала последней добавленной анимации, и >символом, указывающим время окончания самой последней добавленной анимации. Ниже приведен пример того, как вы можете использовать метки на временной шкале:
gsap.timeline ()
.add ('start’)
// this tween starts at the beginning of the
// entire animation
.to (selector, {}, 'start’)
// this tween starts 0.5 seconds after
// the previous tween
.to (selector, {}, 'start+=0.5')
Теперь вы можете переписать приведенный выше код следующим образом:
gsap.timeline ()
.to (selector, {}, '<')
.to (selector, {}, '<0.5')
Наследуемые значения по умолчанию для временной шкалы
Если значения некоторых параметров на временной шкале остаются одинаковыми для всех дочерних анимаций, прошли те времена, когда приходилось записывать эти значения снова и снова. GreenSock 3 позволяет установить эти свойства один раз на родительской временной шкале, и они будут унаследованы дочерними анимациями.
Например, вместо того, чтобы писать:
const tl = new TimelineMax ()
tl.to (selector, 2, {
ease: Power2.easeInOut,
rotation: -180
})
.to (selector, 2, {
ease: Power2.easeInOut,
rotation: -360
})
Теперь вы можете просто написать:
const tl = gsap.timeline ({defaults: {
duration: 2,
ease: 'power2.inOut’
}})
tl.to (selector, {
rotation: -180
})
.to (selector, {
rotation: -360
})
Ключевые кадры
Ваш код GreenSock 3 становится еще более кратким и читаемым благодаря ключевым кадрам. Ключевые кадры, концепция, хорошо знакомая разработчикам CSS, отлично подходят в тех случаях, когда вы хотите анимировать один и тот же элемент
gsap.to (selector, {keyframes: {
{x: 250, duration: 1},
{y: 100, duration: 1, delay: 0.5}
}})
Дополнительные служебные функции
Этот последний выпуск библиотеки GreenSock поставляется с набором новых служебных методов, таких как snap (), который позволяет привязывать значение к приращению или ближайшему значению в массиве, и random (), который позволяет легко генерировать случайное число на основе параметры или случайный выбор элемента в массиве и многое другое.
Простые анимации
Вот пример использования трех основных методов GSAP: to (), from () и fromTo ():
GSAP упрощает создание реалистичных анимаций
Ускорения являются основополагающими компонентами анимации. Они воплощают синхронность подростков и тем самым добавляют интереса и естественности к движению, которое вы создаете на экране.
GSAP позволяет вам добавлять массу замедлений с помощью GreenSock Ease Equalizer, удобного инструмента, который предлагает визуальное представление параметров замедления GSAP по мере того, как вы выбираете и настраиваете наилучшее соответствие для конкретного эффекта, который вам нужен.
Давайте попробуем облегчить нашу музыкальную птицу:
Пример анимации ключевых кадров с GSAP
Как я указывал выше, GreenSock 3 дает вам возможность реализовать несколько твинов для одного и того же элемента более эффективным и удобочитаемым способом с использованием ключевых кадров.
Вот пример:
Использование ключевых кадров GSAP в элементе птицы SVG позволяет мне применять несколько анимаций без необходимости писать каждую анимацию отдельно. Преимущество в том, что мне не нужно повторять часть кода — например, код селектора ('.bird’) или
Управление сложной анимацией с помощью временной шкалы GSAP
Анимации GreenSock сильны, и вы можете многое с ними сделать. Однако, чтобы убедиться, что одна анимация движения перемещается после другой, вам нужно установить delayсвойство второй анимации на величину, учитывающую продолжительность первой анимации. Однако это может затруднить поддержку кода анимации, особенно в более сложных анимациях. Что делать, если вам нужно добавить больше твинов или изменить durationсвойство одной из задержек в одном из твинов? Затем вам придется изменить значения всех или большей части delayсвойств других твинов. Совсем не практично.
Более простым, стабильным и удобным в сопровождении подходом было бы использование временной шкалы GSAP. При использовании временной шкалы все анимационные движения внутри нее выполняются по умолчанию один за другим, без необходимости использования задержек.
Опять же, если вы понаблюдаете, как происходит естественное движение различных частей, вы вскоре поймете, что не все эти части движутся в механической последовательности по отношению друг к другу. Скорее всего, некоторые части начинают двигаться, в то время как некоторые другие уже находятся в движении. Или некоторые части останавливаются немного раньше или немного позже других частей. Временная шкала GSAP предоставляет несколько удобных опций, позволяющих точно настроить начало и конец анимации движения по отношению друг к другу. Они здесь:
Абсолютное время, как число. Например, 2означает, что следующая анимация анимации начинается через две секунды после начала временной шкалы.
Относительное время по отношению к концу всей временной шкалы: '+=2'или '-=2'. Это означает, что анимация анимируется через две секунды после окончания временной шкалы или перекрывает конец временной шкалы на две секунды соответственно.
Этикетка: 'myLabel’. Анимация анимации происходит в точке вставки определенной метки. Если вы не создали этот ярлык, GSAP добавит его в конец временной шкалы.
Относительно метки: 'myLabel+=2'или 'myLabel-=2'. Анимация анимируется через две секунды после или за две секунды до конца 'myLabel’метки соответственно.
В начале последней добавленной анимации (новинка для GSAP 3): '<'.
В конце последней добавленной анимации (новое для GSAP 3): '>'.
Относительно начала последней добавленной анимации (новое для GSAP 3): '<2'или '←2'. Анимация анимации выполняется через две секунды после начала последней добавленной анимации или за две секунды до начала последней добавленной анимации соответственно.
Относительно конца последней добавленной анимации (новое для GSAP 3): '>2'или '>-2'. Анимация анимации выполняется через две секунды после окончания последней добавленной анимации или за две секунды до окончания самой последней добавленной анимации соответственно.
Еще одно преимущество использования временной шкалы — вложенность. Вы можете создавать временные шкалы, которые фокусируются на определенных частях анимации, и вкладывать их в основную временную шкалу. Эта техника очень полезна, когда вам нужно скоординировать различные части анимации в гармоничное и своевременное целое. Это также способ сделать ваш код более читабельным и удобным для сопровождения.
Взгляните на демонстрацию ниже для примера того, как вы будете использовать вложенные временные шкалы:
Чтобы точно настроить анимацию, может быть полезно замедлить ее во время разработки. Для этого используйте:
master.timeScale (0.2)
Теперь гораздо проще контролировать относительные тайминги и другие мелкие детали. Однако не забудьте удалить эту строку кода в рабочей среде!
Плагин MotionPath
GSAP предоставляет множество удивительных плагинов, которые позволяют создавать сложные и забавные эффекты с помощью нескольких строк интуитивно понятного кода.
Один из самых крутых типов анимации, который вы можете создать, — это представление объекта, плавно движущегося по траектории. Нелегко достичь, по крайней мере, без GSAP.
Новый плагин MotionPath позволяет быстро и просто заставить любой элемент перемещаться по траектории SVG. Простейшая реализация плагина выглядит так:
// register the plugin (just once)
gsap.registerPlugin (MotionPathPlugin)
gsap.to ('.bird’, {
x: 20,
y: 50,
motionPath: '#path’
})
Пока у вас есть путь SVG с idpath, все в порядке. Вы также можете ввести значения пути напрямую вместо, idи это сработает.
Вы можете точно настроить эффект, используя различные свойства, которые вы можете установить внутри объекта motionPath, как вы можете видеть в демонстрации ниже:
Чтобы узнать больше об удивительных функциях этого плагина, перейдите к документации.
Плагин ScrollTrigger
ScrollTrigger — это последний плагин, выпущенный GreenSock, и у него есть несколько удивительных возможностей, которые позволяют вам полностью контролировать анимацию прокрутки эффективно и интуитивно. Например:
с помощью этого плагина вы можете анимировать практически все, что угодно при прокрутке — например, элементы DOM, CSS, SVG, WebGL, Canvas.
вы можете легко прокручивать анимацию
вы можете закреплять элементы на месте
вы можете создавать направленные умные анимации
Также позаботятся об изменении размера экрана и отличной производительности.
После импорта плагина в свой проект, что удобно сделать через CDN на сайте GSAP, и его регистрации, чтобы он беспрепятственно интегрировался с основной библиотекой, проще всего начать его использовать следующим образом:
// register ScrollTrigger
gsap.registerPlugin (ScrollTrigger)
/* implement the plugin to animate an element
300 px to the right when the element is in view */
gsap.to (element, {
x: 300,
duration: 2,
scrollTrigger: element
})
Когда элемент, указанный в scrollTriggerсвойстве, находится внутри области просмотра, происходит анимация.
Чтобы реализовать множество настроек, доступных в этом плагине, просто используйте scrollTriggerлитерал объекта. Например:
Объект scrollTriggerв приведенной выше демонстрации включает triggerэлемент, который вы хотите анимировать так, как он появляется в окне просмотра.
Он также включает startсвойство, которое вы можете использовать, чтобы указать плагину позицию, в которой должен находиться элемент во время прокрутки, чтобы анимация началась. В нашем случае элемент начнет двигаться, как только его верхняя часть попадет в центр окна просмотра.
Вы можете указать, что должен делать ваш триггерный элемент, когда пользователи прокручивают его или возвращаются к его положению, задав toggleActionsсвойство scrollTriggerобъекта. GSAP предоставляет различные параметры для максимального контроля, которые вы можете установить при срабатывании следующих событий: onEnter, onLeave, onEnterBack, и onLeaveBack. По умолчанию эти параметры установлены следующим образом: 'play none none’. В приведенной выше демонстрации я настроил свою анимацию так, чтобы изображение открывалось каждый раз, когда оно находится в нужном месте в окне просмотра, и закрывалось, когда оно больше не было видно, с помощью следующей строки кода: toggleActions: 'play reverse restart reverse’.
Чтобы узнать больше об этом мощном плагине, ознакомьтесь со следующими ресурсами:
Документы ScrollTrigger на
видео «Начало работы «Карла Шоффа, мастера GSAP из Creative Coding Club, которое включает ScrollTrigger Express, бесплатный курс по GSAP 3 для начинающих
Вводный видеоурок Гэри Саймона из DesignCourse
Вывод
Это краткое введение только поверхностно рассказало о том, что вы можете делать с GreenSock. Если вам интересно, начните погружаться в его доступную и подробную документацию.
Теперь все кончено. Загрузите последнюю версию GreenSock 3 и начните движение в Интернете!
