Использование 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.

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

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

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

   
npm install gsap
    

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

   
yarn add gsap
    

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

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

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

TweenMax.method(element, duration, vars)
    

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

var tl = gsap.timeline();
    

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

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 () разработчики могут определять как начальные, так и конечные свойства данной анимации. Синтаксис этого метода немного отличается от синтаксиса двух других методов, упомянутых выше, поскольку он принимает два разных объекта, используемых для указания начального и конечного значения:

gsap.fromTo(".box", {x: 20 , y: 10}, { x: 200 , y : 100, duration: 1});
    

set()

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

gsap.set(".box", {x: 10 , y: 20});
    

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

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

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

var tl = gsap.timeline({repeat: 30, repeatDelay: 1});
    

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

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 возвращает экземпляр промежуточного кадра. Именно в этом случае вызываются ваши функции управления анимацией. Возьмем, к примеру, следующий экземпляр анимации движения:

// create a reference to the animation
const instance = gsap.to(".box", {x: 100 , y: 100});
    

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

document.querySelector(".pause").onclick = () => instance.pause();
    

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

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

Приоритет

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

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

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

gsap.to(".box", {duration: 1, x:150, onComplete: tweenComplete});
         
function tweenComplete() {
    console.log("completed");
}
    

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

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, как показано ниже:

gsap.registerPlugin( Draggable , MotionPathPlugin, TextPlugin);
    

Draggable

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

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

Draggable.create("#draggable");
    

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

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

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

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 пикселей:

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, запустив:

npm install gsap
    

или же:

yarn add gsap
    

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

npm install ./gsap-bonus.tgz
    

либо:

yarn add ./gsap-bonus.tgz
    

Импорт GSAP

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

import { gsap } from "gsap";
    

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

import { PixiPlugin } from "gsap/PixiPlugin.js";
import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
    

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

gsap.registerPlugin(PixiPlugin, MotionPathPlugin);
    

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

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

import React from 'react'
class App extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
hello world
)
    }
}
    

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

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 

Источник: https://webformyself.com/ispolzovanie-gsap-3-dlya-veb-animacii/

Статьи по теме

Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO

Лучшие практики обеспечения безопасности PHP и PDO в современной веб-разработке Оглавление ...

2024-11-26

Перенос сайта на WordPress с одного домена на другой

Данная инструкция поможет вам, если вам нужно перенести сайт: с одного домена на другой; с поддомена на основной домен (наприме�...

2024-11-15

OSPanel 6: быстрый старт

Коротко объясняю как быстро начать работу с Open Server Panel v.6 Содержание: Вступление Концепция новой версии Первая уст...

2024-11-08

Как установить PhpMyAdmin в Open Server Panel

Как установить PhpMyAdmin в Open Server Panel В данной статье мы рассмотрим процесс установки и настройки PhpMyAdmin (PMA) на платформе Open Server...

2024-11-08

Как быстро запустить Laravel на Windows

Все привет, меня зовут Павел Жуковский и сегодня я расскажу о том как быстро развернуть Laravel на Windows. Как развернуть чере...

2024-09-30

Next.js

На мой взгляд, Next.js - это лучший на сегодняшний день инструмент для разработки веб-приложений. Обратите внимание: руководство актуально �...

2024-09-25

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения Либо ограничить доступ. OpenAI рассказа...

2024-09-05

WebSocket

Протокол WebSocket («веб-сокет»), описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером че...

2024-08-01

Ошибка 404: что это такое и как ее использовать для бизнеса

Для SEO 404 Error — возможность сохранить клиента и позиции в выдаче. Как это сделать, в статье. Окно «404 Not Found» вид...

2024-07-17

PostgreSQL 16. Изоляция транзакций. Часть 2

Введение Данная статья является продолжением первой части: "PostgreSQL 16. Организация данных. Часть 1". Как и первая часть, эта является объед�...

2024-05-27

Комментирование кода и генерация документации в PHP

Зачем нужны комментарии к программному коду? В каком виде их писать? Где они нужны, а где нет? Как правильно комментировать код? Как прид�...

2024-04-22

Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи о�...

2024-04-22

23 сервиса для эффективного экспресс-аудита любого сайта

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

2024-04-17

Яндекс переходит на новую версию Wordstat

Часть старой функциональности уже недоступна. Обновленный Яндекс Вордстат полностью перейдет на основной домен wordstat.ru 20 марта. С...

2024-04-08

Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть

Она умеет распознавать эмоции человека по голосу. Алгоритм-эмпат определяет характер речи пользователя: говорит он с явным негатив...

2024-04-08