От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации. Она позволяет анимировать практически все, к чему можно получить доступ с помощью JavaScript, включая SVG, общие объекты, холсты и многое другое.
GSAP для анимации: введение
Веб-анимация в самой простой форме включает в себя изменение значения свойств элементов столько раз в секунду, сколько возможно. GSAP делает это, принимая начальное и конечное значение, а затем периодически переходя между этими двумя значениями, чтобы создать эффект анимации. Например, эффект постепенного исчезновения достигается установкой начальной и конечной непрозрачности элемента на 1 и 0 соответственно. Результатом является постепенное исчезновение указанного элемента по мере перехода значения свойства непрозрачности с 1 на 0.
GSAP — отличный выбор для библиотеки веб-анимации для тех, кто отдает приоритет скорости, гибкости и контролю. GSAP — чрезвычайно быстрая библиотека (примерно в 20 раз быстрее, чем библиотека jquery), что означает, что ваша анимация GSAP не вызовет значительных задержек в приложении.
Имея на выбор множество методов, GSAP также позволяет анимировать практически все свойства CSS наиболее желательным из возможных способов. С помощью GSAP вы можете точно определить, как долго будет длиться анимация, а также конкретные свойства, которые необходимо изменить, без необходимости писать расширенные пользовательские анимации, которые могут замедлить работу вашего приложения.
Наконец, GSAP не зависит от какой-либо внешней библиотеки, поэтому нет необходимости устанавливать или загружать какие-либо дополнительные библиотеки в ваше приложение, чтобы начать анимацию. В этом руководстве мы будем использовать GSAP 3. Подробнее об этой библиотеке можно узнать здесь.
Начало работы с GSAP
GSAP можно загрузить в ваше приложение разными способами, но самый быстрый способ — добавить GSAP CDN в ваш HTML-файл:
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> |
Как вариант, GSAP можно установить с помощью npm и yarn. Для установки через npm запустите:
|
1 |
npm install gsap |
В ином случае запустите:
|
1 |
yarn add gsap |
Вы также можете скачать zip-файл с официального сайта GSAP здесь или получить его с github.
Использование анимации движения в GSAP
Анимация движения — это единичное движение из-за изменения свойства. В GSAP типичная анимация движения содержит метод, элемент для анимации, продолжительность анимации и свойства, называемые vars. Ниже приведен базовый синтаксис заданной анимации движения:
|
1 |
TweenMax.method(element, duration, vars) |
TimeLine — это контейнер для анимации, который позволяет размещать анимацию в реальном времени. Этого можно добиться с помощью различных методов GSAP. Ниже приведен пример типичной timeline в GSAP:
|
1 |
var tl = gsap.timeline(); |
Затем вы можете создать анимацию, используя любой из методов JavaScript. В этом примере мы будем использовать метод to(), который определяет конечные значения:
|
1 |
tl.to(".box", {duration: 1, opacity: 0 }); |
Обладая этим базовым пониманием, мы можем теперь перейти к тому, как создавать анимацию в GSAP, используя различные методы JavaScript.
Использование методов GSAP
Методы являются ключом к любой анимации в GSAP. Методы помогают определить целевые значения анимации, а также начальные значения. В следующем разделе мы рассмотрим методы GSAP, от самых простых до более сложных, и то, как их использовать для анимации в вашем приложении.
to()
Это наиболее распространенный метод GSAP, используемый для установки конечных значений данной анимации. При использовании этого метода GSAP автоматически устанавливает начальные значения на основе заданных свойств CSS данного элемента.
from()
Метод from() лучше всего использовать для обратной анимации. Когда вы устанавливаете начальные свойства CSS, GSAP вернется к значениям по умолчанию. Например, если непрозрачность установлена на 0, тогда GSAP начинает анимацию с непрозрачности 0 до тех пор, пока не достигнет первоначально установленной непрозрачности (в нашем примере — 1). Ниже приведен пример анимации с использованием метода from().
fromTo()
С помощью метода fromTo () разработчики могут определять как начальные, так и конечные свойства данной анимации. Синтаксис этого метода немного отличается от синтаксиса двух других методов, упомянутых выше, поскольку он принимает два разных объекта, используемых для указания начального и конечного значения:
|
1 |
gsap.fromTo(".box", {x: 20 , y: 10}, { x: 200 , y : 100, duration: 1}); |
set()
Метод set() — это метод нулевого направления, используемый для установки свойств данного элемента. Этот метод пригодится, когда вы хотите установить свойства, которые позже вы будете анимировать с помощью GSAP.
|
1 |
gsap.set(".box", {x: 10 , y: 20}); |
Из вышесказанного, координаты x и y элемента с классом «.box» установлены равными 10 и 20 соответственно. Затем вы можете анимировать элемент позже с уже установленными начальными значениями.
Взаимодействие методов и базовая последовательность
Чтобы добиться более лаконичной анимации, в которой мы точно определяем, какая анимация идет первой, нам нужно привязать метод to() и перечислить анимации в том порядке, в котором мы хотим их видеть. Для этого мы сначала создадим временную шкалу (timeline):
|
1 |
var tl = gsap.timeline({repeat: 30, repeatDelay: 1}); |
Затем мы можем приступить к добавлению каждой из наших анимаций движения на уже созданную временную шкалу:
|
1 2 3 |
tl.add( gsap.to("#box", {duration: 1, x: 100}) ); tl.add( gsap.to("#box2", {duration: 2, x: 100 , scale: 1.1}) ); tl.add( gsap.to("#box3", {duration: 3, x: 100 , scale: 2}) ); |
Функции управления анимацией
Функции управления анимацией дают вам полный контроль над анимацией, позволяя выполнять такие действия, как пауза и реверс. Функции управления включают, среди прочего, play(), pause(), reverse(), kill() и resume().
Обратите внимание, что анимация с любым из заданных методов GSAP возвращает экземпляр промежуточного кадра. Именно в этом случае вызываются ваши функции управления анимацией. Возьмем, к примеру, следующий экземпляр анимации движения:
|
1 2 |
// create a reference to the animation const instance = gsap.to(".box", {x: 100 , y: 100}); |
Обратите внимание, как мы можем управлять им с помощью функции pause() при клике мышью:
|
1 |
document.querySelector(".pause").onclick = () => instance.pause(); |
Особые свойства в GSAP
GSAP по-разному обрабатывает специальные свойства, такие как приоритет и обратный вызов, для достижения лучших результатов.
Приоритет
Приоритет используются для анимации группы элементов. Он позволяет указать время начала анимации каждого элемента в группе.
Обратный вызов
Обратный вызов необходим, если вы хотите выполнить определенное действие после того, как произошло событие (например, завершение или обновление). Некоторые из доступных обратных вызовов в GSAP включают: onComplete, onStart и onUpdate. Вы можете записать предложение в консоль, используя обратный вызов onComplete следующим образом:
|
1 2 3 4 5 |
gsap.to(".box", {duration: 1, x:150, onComplete: tweenComplete}); function tweenComplete() { console.log("completed"); } |
Обратный вызов также может принимать параметр, используя свойство param обратного вызова, как показано ниже:
|
1 2 3 4 5 |
gsap.to(".box", {duration: 1, x: 100, onComplete: tweenComplete, onCompleteParams: ["message parameter"]}); function tweenComplete(message) { console.log(message); } |
Свойство onCompleteParams принимает параметр функции.
Плагины GSAP
Плагины GSAP предоставляют дополнительные функции, недоступные в традиционной библиотеке GSAP. Они содержат специальные свойства, которые позже динамически вставляются в GSAP. Некоторые из самых популярных подключаемых модулей GSAP включают: Draggable, DrawSVGPlugin и MorphSVGPlugin. Обратите внимание, что перед использованием любого подключаемого модуля GSAP вам необходимо зарегистрировать его в ядре GSAP, как показано ниже:
|
1 |
gsap.registerPlugin( Draggable , MotionPathPlugin, TextPlugin); |
Draggable
Плагин GSAP Draggable позволяет создавать потрясающие перетаскиваемые элементы с помощью GSAP. Плагин поддерживает сенсорное управление, поэтому пользователи могут использовать его как на планшетах, так и на мобильных телефонах. С помощью Draggable вы можете установить ту часть приложения, которая должна запускать перетаскивание, используя свойство триггера. Плагин Draggable хорошо работает с преобразованными контейнерами и может использоваться в SVG с впечатляющими результатами.
Чтобы начать работу с Draggable, мы можем просто сделать элемент перетаскиваемым, как показано ниже:
|
1 |
Draggable.create("#draggable"); |
Это позволит перетаскивать элемент как по горизонтали, так и по вертикали.
Используя приведенный выше пример, вы можете использовать другой параметр для конфигураций. Вы можете определить положение перетаскивания, установить границы элемента и вызвать функцию при щелчке по элементу или после завершения перетаскивания.
В этом фрагменте свойство inertia используется для того, чтобы элемент можно было вращать в плагине Draggable:
|
1 2 3 4 5 6 7 8 9 10 11 |
Draggable.create("#draggable", { type:"x", bounds: document.getElementById("container"), inertia: true, onClick: function() { console.log("clicked"); }, onDragEnd: function() { console.log("drag is complete"); } }); |
Привязка к перетаскиванию
Свойства snap и liveSnap определяют, когда и где перетаскиваемый элемент должен привязываться к нему после или во время перетаскивания. Здесь liveSnap позволяет перетаскиваемому элементу привязываться к ближайшей точке в массивах, определенной с помощью свойств точек, когда он находится в пределах радиуса 15 пикселей:
|
1 2 3 4 5 6 7 |
Draggable.create("#draggable", { type: "x,y", liveSnap: { points: [{x: 0, y: 0}, {x: 150, y: 0}, {x: 250, y: 50}], radius: 15 } }) |
Вы можете узнать больше о других плагинах, перечисленных выше, здесь.
GSAP анимация в React
Для разработчиков React, которые хотят начать работу с GSAP, приведу руководство о том, как по-другому работать с react.js.
Установка GSAP
GSAP можно установить с помощью npm, запустив:
|
1 |
npm install gsap |
или же:
|
1 |
yarn add gsap |
Для установки с дополнительными плагинами GSAP:
|
1 |
npm install ./gsap-bonus.tgz |
либо:
|
1 |
yarn add ./gsap-bonus.tgz |
Импорт GSAP
Затем вы можете приступить к импорту GSAP в файл проекта:
|
1 |
import { gsap } from "gsap"; |
Плагины можно импортировать индивидуально, например:
|
1 2 |
import { PixiPlugin } from "gsap/PixiPlugin.js"; import { MotionPathPlugin } from "gsap/MotionPathPlugin.js"; |
Как упоминалось ранее, не забудьте зарегистрировать свои плагины перед использованием:
|
1 |
gsap.registerPlugin(PixiPlugin, MotionPathPlugin); |
Создание вашей первой анимации GSAP
Сначала создайте компонент на основе классов, как обычно для любого проекта React:
|
1 2 3 4 5 6 7 8 9 |
import React from 'react' class App extends React.Component{ constructor(props){ super(props) } render(){ return(<h1>hello world</h1>) } } |
Мы будем использовать ref для нацеливания на конкретный элемент, который нужно анимировать. Наша анимация будет создана после монтирования приложения React с использованием метода componentDidMount(). Элемент для анимации, а также результирующий экземпляр анимации движения будут сохранены в состоянии.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react' import { gsap } from 'gsap' class App extends React.Component{ constructor(props){ super(props) this.myElement = null; this.myTween = null; } componentDidMount(){ this.myTween = gsap.to(this.myElement, 1, {x: 100, y: 100}); } render(){ return <div ref={div => this.myElement = div} /> } } |
Заключение
GSAP остается одной из самых гибких библиотек для веб-анимации, а с GSAP 3 анимация стала еще проще. Надеемся, что из этого руководства вы узнали, что вам не нужно ограничивать анимацию только базовыми элементами.
GSAP предлагает множество методов, которые значительно упрощают написание кода анимации на JavaScript. Вы добавляете новые библиотеки JS для повышения производительности или создания новых функций? Что, если они поступают наоборот?
Нет сомнений в том, что интерфейсы становятся более сложными. По мере добавления в приложение новых библиотек JavaScript и других зависимостей вам потребуется больше информации, чтобы гарантировать, что ваши пользователи не столкнутся с неизвестными проблемами.
Автор: Elizabeth Amaechi
Источник: blog.logrocket.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
