Использование GSAP 3 для веб-анимации

От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации. Она позволяет анимировать практически все, к чему можно получить доступ с помощью JavaScript, включая SVG, общие объекты, холсты и многое другое.

GSAP для анимации: введение

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

GSAP — отличный выбор для библиотеки веб-анимации для тех, кто отдает приоритет скорости, гибкости и контролю. GSAP — чрезвычайно быстрая библиотека (примерно в 20 раз быстрее, чем библиотека jquery), что означает, что ваша анимация GSAP не вызовет значительных задержек в приложении.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Начало работы с GSAP

GSAP можно загрузить в ваше приложение разными способами, но самый быстрый способ — добавить GSAP CDN в ваш HTML-файл:

Как вариант, GSAP можно установить с помощью npm и yarn. Для установки через npm запустите:

В ином случае запустите:

Вы также можете скачать zip-файл с официального сайта GSAP здесь или получить его с github.

Использование анимации движения в GSAP

Анимация движения — это единичное движение из-за изменения свойства. В GSAP типичная анимация движения содержит метод, элемент для анимации, продолжительность анимации и свойства, называемые vars. Ниже приведен базовый синтаксис заданной анимации движения:

TimeLine — это контейнер для анимации, который позволяет размещать анимацию в реальном времени. Этого можно добиться с помощью различных методов GSAP. Ниже приведен пример типичной timeline в GSAP:

Затем вы можете создать анимацию, используя любой из методов JavaScript. В этом примере мы будем использовать метод to(), который определяет конечные значения:

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

Использование методов GSAP

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

to()

Это наиболее распространенный метод GSAP, используемый для установки конечных значений данной анимации. При использовании этого метода GSAP автоматически устанавливает начальные значения на основе заданных свойств CSS данного элемента.

from()

Метод from() лучше всего использовать для обратной анимации. Когда вы устанавливаете начальные свойства CSS, GSAP вернется к значениям по умолчанию. Например, если непрозрачность установлена на 0, тогда GSAP начинает анимацию с непрозрачности 0 до тех пор, пока не достигнет первоначально установленной непрозрачности (в нашем примере — 1). Ниже приведен пример анимации с использованием метода from().

fromTo()

С помощью метода fromTo () разработчики могут определять как начальные, так и конечные свойства данной анимации. Синтаксис этого метода немного отличается от синтаксиса двух других методов, упомянутых выше, поскольку он принимает два разных объекта, используемых для указания начального и конечного значения:

set()

Метод set() — это метод нулевого направления, используемый для установки свойств данного элемента. Этот метод пригодится, когда вы хотите установить свойства, которые позже вы будете анимировать с помощью GSAP.

Из вышесказанного, координаты x и y элемента с классом «.box» установлены равными 10 и 20 соответственно. Затем вы можете анимировать элемент позже с уже установленными начальными значениями.

Взаимодействие методов и базовая последовательность

Чтобы добиться более лаконичной анимации, в которой мы точно определяем, какая анимация идет первой, нам нужно привязать метод to() и перечислить анимации в том порядке, в котором мы хотим их видеть. Для этого мы сначала создадим временную шкалу (timeline):

Затем мы можем приступить к добавлению каждой из наших анимаций движения на уже созданную временную шкалу:

Функции управления анимацией

Функции управления анимацией дают вам полный контроль над анимацией, позволяя выполнять такие действия, как пауза и реверс. Функции управления включают, среди прочего, play(), pause(), reverse(), kill() и resume().
Обратите внимание, что анимация с любым из заданных методов GSAP возвращает экземпляр промежуточного кадра. Именно в этом случае вызываются ваши функции управления анимацией. Возьмем, к примеру, следующий экземпляр анимации движения:

Обратите внимание, как мы можем управлять им с помощью функции pause() при клике мышью:

Особые свойства в GSAP

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

Приоритет

Приоритет используются для анимации группы элементов. Он позволяет указать время начала анимации каждого элемента в группе.

Обратный вызов

Обратный вызов необходим, если вы хотите выполнить определенное действие после того, как произошло событие (например, завершение или обновление). Некоторые из доступных обратных вызовов в GSAP включают: onComplete, onStart и onUpdate. Вы можете записать предложение в консоль, используя обратный вызов onComplete следующим образом:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Обратный вызов также может принимать параметр, используя свойство param обратного вызова, как показано ниже:

Свойство onCompleteParams принимает параметр функции.

Плагины GSAP

Плагины GSAP предоставляют дополнительные функции, недоступные в традиционной библиотеке GSAP. Они содержат специальные свойства, которые позже динамически вставляются в GSAP. Некоторые из самых популярных подключаемых модулей GSAP включают: Draggable, DrawSVGPlugin и MorphSVGPlugin. Обратите внимание, что перед использованием любого подключаемого модуля GSAP вам необходимо зарегистрировать его в ядре GSAP, как показано ниже:

Draggable

Плагин GSAP Draggable позволяет создавать потрясающие перетаскиваемые элементы с помощью GSAP. Плагин поддерживает сенсорное управление, поэтому пользователи могут использовать его как на планшетах, так и на мобильных телефонах. С помощью Draggable вы можете установить ту часть приложения, которая должна запускать перетаскивание, используя свойство триггера. Плагин Draggable хорошо работает с преобразованными контейнерами и может использоваться в SVG с впечатляющими результатами.

Чтобы начать работу с Draggable, мы можем просто сделать элемент перетаскиваемым, как показано ниже:

Это позволит перетаскивать элемент как по горизонтали, так и по вертикали.

Используя приведенный выше пример, вы можете использовать другой параметр для конфигураций. Вы можете определить положение перетаскивания, установить границы элемента и вызвать функцию при щелчке по элементу или после завершения перетаскивания.

В этом фрагменте свойство inertia используется для того, чтобы элемент можно было вращать в плагине Draggable:

Привязка к перетаскиванию

Свойства snap и liveSnap определяют, когда и где перетаскиваемый элемент должен привязываться к нему после или во время перетаскивания. Здесь liveSnap позволяет перетаскиваемому элементу привязываться к ближайшей точке в массивах, определенной с помощью свойств точек, когда он находится в пределах радиуса 15 пикселей:

Вы можете узнать больше о других плагинах, перечисленных выше, здесь.

GSAP анимация в React

Для разработчиков React, которые хотят начать работу с GSAP, приведу руководство о том, как по-другому работать с react.js.

Установка GSAP

GSAP можно установить с помощью npm, запустив:

или же:

Для установки с дополнительными плагинами GSAP:

либо:

Импорт GSAP

Затем вы можете приступить к импорту GSAP в файл проекта:

Плагины можно импортировать индивидуально, например:

Как упоминалось ранее, не забудьте зарегистрировать свои плагины перед использованием:

Создание вашей первой анимации GSAP

Сначала создайте компонент на основе классов, как обычно для любого проекта React:

Мы будем использовать ref для нацеливания на конкретный элемент, который нужно анимировать. Наша анимация будет создана после монтирования приложения React с использованием метода componentDidMount(). Элемент для анимации, а также результирующий экземпляр анимации движения будут сохранены в состоянии.

Заключение

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

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

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

Автор: Elizabeth Amaechi

Источник: blog.logrocket.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.