Руководство для начинающих с анимационной платформы GreenSock

1656673826 rukovodstvo dlya nachinayushhih s animaczionnoj platformy greensock

Николас Крамер

Начало создания анимации на основе временной шкалы без знания JavaScript

rDrPAgnDjP9VpvSVK8QKpD7o1NhzuAEFP0uL

Введение

Платформа анимации GreenSock (сокращенно GSAP) – это мощная библиотека JavaScript, которая позволяет разработчикам и дизайнерам интерфейса создавать надежные анимации на основе временной шкалы. Это позволяет более точно контролировать более сложные последовательности анимации, а не иногда ограничивать. keyframe и animation свойства, которые предлагает CSS

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

Благодаря GSAP вы можете начать создавать увлекательные анимации, не зная даже JavaScript.

Данное руководство покажет, как настроить и использовать функцию TweenMax от GSAP, а также немного погрузится в плагин DrawSVG от Club GreenSock. Каждый из приведенных ниже примеров имеет соответствующую ссылку CodePen, поэтому вы можете следить на другой вкладке.

Начинаем

Перед кодировкой нам сначала нужно добавить библиотеку GSAP в наш HTML-файл. Для этого вам потребуется ссылка CDN на библиотеку TweenMax. Вы можете найти ссылки на TweenMax и другие CDN GSAP здесь.

Примечание: CDN означает сеть доставки содержимого. Это означает, что вместо размещения файлов JavaScript на вашем сайте внешний источник, например CloudFlare, может разместить их за вас.

Получив ссылку CDN, вставьте ее в a <script> внизу вашего HTML-файла, например:

<script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

Это все, что вам нужно для начала! Если вы используете онлайн-среду разработки, например CodePen, вы можете установить GSAP, отредактировав параметры пера.

UjL1HujbnFWqH3e4YWROTPBT6t105aD80q0a
Щелкните значок шестерни рядом с текстовым редактором JS и найдите TweenMax, чтобы установить его в CodePen

Понимание подростков

Подростки – это основные функции анимации в GSAP. Чтобы анимировать любой объект HTML, мы должны вызывать объект, определить свойства, которые мы собираемся анимировать, продолжительность анимации, смягчение анимации и любые другие параметры, такие как время задержки.

К примеру, если бы мы изменили цвет красного прямоугольника на черный, а также переместили его вниз и вправо, анимация выглядела бы так в JavaScript:

TweenLite.to(“#rectangle”, 2, {  left:100,   top: 75,   backgroundColor:"#000000",   ease: Power4.easeIn});
5I8DYi4CJ3kOUTzHtRvJvYQdztrSdzNL2J3U
Эта анимация дает нам прямоугольник, двигающийся по диагонали и изменяющий цвет.

Давайте разберем это:

TweenLite позволяет нашему файлу JavaScript знать, что мы хотим анимировать с помощью GSAP. The .to сразу после этого означает, что мы хотим, чтобы наш объект анимировался из исходного статического состояния, определенного нашими HTML и CSS, до окончательного анимированного состояния, определенного нашим JavaScript.

Вы можете использовать .from вместо того, чтобы изменить это. Мы рассмотрим это чуть позже в этой статье.

Далее мы определяем объект, который мы хотим анимировать. В нашем случае это HTML-объект с ID прямоугольника. Это выглядит так “#rectangle”, в нашем коде. Мы должны убедиться, что наш объект взят в кавычки и что мы используем # чтобы указать, что мы вызываем идентификатор. Здесь можно указать любой идентификатор, если это элемент, определенный в HTML. Также заметьте, что запятая после конечной цитаты также важна. Без него анимация не запустится.

The 2, после идентификатора элемента определяет продолжительность анимации в секундах. Итак, в этом случае мы определяем продолжительность анимации как 2 секунды. Если бы мы хотели, чтобы оно было полсекунды, мы бы изменили значение на 0.5, вместо этого.

Параметры в скобках представляют какие-либо свойства, которые вы хотите анимировать. В этом примере мы анимируем left top и background-color свойства CSS Обратите внимание, как каждое из этих различных свойств использует верблюжий регистр для их вызова вместо типичной нотации дефисов, используемой в CSS. Здесь можно добавить сколько угодно разных свойств, разделяя их запятыми после значения.

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

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

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

Анимация является основным основанием для анимации GSAP. Вы можете поэкспериментировать с примером этого Tween в CodePen здесь.

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

Анимация шкалы времени

Если вы когда-либо использовали программное обеспечение для анимации или создания прототипов, таких как After Effects или Principle, вы уже знакомы с анимацией на временной шкале. Традиционные временные шкалы обычно представляют собой серию анимаций, происходящих поочередно или одновременно. Графики в GSAP ничем не отличаются.

w4sxnYFapKKBxLGH0mpkmqMDantOe4qCI5gN
Визуализация шкалы времени в After Effects. Графики GSAP не сильно отличаются.

Чтобы вызвать временную шкалу, вы должны сначала определить переменную в верхней части вашего JavaScript как новую TimelineLite:

var tl = new TimelineLite;

Чтобы разбить эту строку кода по частям, знайте это var сокращение от перемен. Если вы не знакомы с тем, что такое переменная, воспринимайте это как сокращение большей части кода. В этом случае мы определили новую переменную как tl и установите его равным new TimelineLite. Это означает, что каждый раз, когда мы вводим tl в нашем коде это означает new TimelineLite.

Обратите внимание, что мы можем заменить tl для любого сокращенного текста, который мы хотим. Я использую tl потому что это сокращение от timeline. Это полезно, потому что если у нас есть несколько временных шкал в нашем файле, мы можем предоставить каждой уникальной переменной, чтобы избежать путаницы.

Давайте теперь воспроизведем нашу первую анимацию с помощью TimelineLite вместо TweenLite чтобы увидеть, как это работает.

var tl = new TimelineLite;
tl.to(“#rectangle”, 2, {  x:100,  y:75, backgroundColor: “#000000”, ease: Power4.easeIn})
5wj2zfQPRu21MgfKvEsL1Op66MuUkf6k1kAM
Обратите внимание, как он рендерит точно такую ​​же анимацию, что и предыдущий твин.

Вы заметите, что это мало чем отличается от нашего TweenLite анимация сверху. Единственное подлинное отличие состоит в том, что вместо заявленного TweenLite.to мы используем tl.to вместо этого. Вы также заметите, что мы сейчас используем x и y координаты вместо left и top свойства CSS Они более или менее ведут себя одинаково.

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

Для этой второй анимации давайте увеличим масштаб прямоугольника на 150% и станет серым после первой анимации. Для этого мы добавим еще один блок кода под нашу первую анимацию. В общем, это будет выглядеть так:

var tl = new TimelineLite;
tl.to(“#rectangle”, 2, {  x:100,  y: 75, backgroundColor: “#000000”, ease: Power4.easeIn})
.to(“#rectangle”, 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: “#454545”, ease: Back.easeOut.config(1.7)});
94-ghLwuO8WBZMKUAcao7H5LhZv5E8KTP12j
Сейчас мы объединяем две анимации по временной шкале.

Вы видите, что этот второй блок кода не имеет tl.to в начале шкалы времени. Зато имеет только .to.

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

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

Вы также заметите, что мы используем два новых свойства, scaleX и scaleY. Эти характеристики ведут себя конкретно так, как они звучат, они наращивают размер объекта на процент. В этом случае 1,5 эквивалентно 150%.

Наконец, мы используем уникальную easing функцию, которая называется Back.easeOut.config(1.7). Эта легкость придает естественный ритм нашей анимации, превышая намеченное значение, а затем возвращаясь к конечному значению. В случае этой анимации мы видим, как прямоугольник чуть-чуть превышает 150%, а затем уменьшается.

Анимация нескольких объектов с помощью TimelineLite

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

Например, если бы мы создали HTML-объект в виде круга и появились после того, как наш прямоугольник увеличился, наш код выглядел бы так:

var tl = new TimelineLite;
tl.to(“#rectangle”, 2, {  x:100,  y: 75, backgroundColor: “#000000”, ease: Power4.easeIn})
.to(“#rectangle”, 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: “#454545”, ease: Back.easeOut.config(1.7)})
.from(“#circle”, 1, { opacity: 0,});
k3esUfRsGnVa35rCSbl4XiLXCxbrYQswSfVj
В этом последнем блоке кода в конце нашей анимации появляется круг.

Мы добавили третий блок кода в нашу анимацию, которая вызывает круг.

Также заметьте, как мы сейчас используем .from метод. Это означает, что наша анимация круга начинается с 0% непрозрачности, а затем переходит к 100% непрозрачности.

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

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

DrawSVG

Наряду с бесплатными функциями TweenLite и TimelineLite, GSAP также предлагает премиум-контент, позволяющий вам легко манипулировать SVG. К счастью, эти плагины доступны для бесплатного использования на CodePen, найдя их в настройках пера (значок шестерни возле текстового редактора JS).

Плагин DrawSVG позволяет легко анимировать линии SVG. Чтобы показать это, у нас будет SVG изображение единорога на картине тощие. Вы можете следить за соответствующим CodePen здесь.

XintxK8gySO2Q8qYrIYpSoAVlTbsGeYldO2M
Конечный результат анимации SVG.

Во-первых, нам нужно экспортировать наш SVG и импортировать его в текстовый редактор.

Чтобы узнать, как правильно экспортировать SVG, посмотрите предыдущую статью здесь.

Далее нам нужно предоставить каждому из наших путей идентификатор, чтобы мы могли вызвать каждый из них на временной шкале. Это может занять некоторое время, если у вас есть сложный SVG с серией разных линий анимации. Для простоты я назову первый путь #unicorn1 и назовите следующий путь #unicorn2 и так далее, пока они не получат уникальный идентификатор.

<!––An example of a path with an ID--><path id=”unicorn1" class=”st0" d=”M371.8,252.4c0,0,2.8,1.8,5,1.2"/>

Теперь, когда все наши пути имеют идентификатор, мы можем приступить к разработке нашей анимации временной шкалы. По-прежнему нам нужно создать переменную, которая будет работать как наша TimelineLite переменная:

var unicorndraw = new TimelineLite();

В этом случае мы будем использовать переменную unicorndraw.

Последний шаг, который нам нужно сделать, – это создать анимацию TimelineLite, которая вызывает каждый из отдельных путей:

unicorndraw.from(“#unicorn1, #unicorn2, #unicorn3, #unicorn4, #unicorn5, #unicorn6, #unicorn7, #unicorn8, #unicorn9, #unicorn10, #unicorn11, #unicorn12, #unicorn13, #unicorn14, #unicorn15, #unicorn16, #unicorn17, #unicorn18, #unicorn19, #unicorn20, #unicorn21, #unicorn22, #unicorn23, #unicorn24, #unicorn25, #unicorn26, #unicorn27, #unicorn28, #unicorn29, #unicorn30, #unicorn31, #unicorn32, #unicorn33, #unicorn34, #unicorn35, #unicorn36, #unicorn37, #unicorn38, #unicorn39, #unicorn40, #unicorn41, #unicorn42, #unicorn43, #unicorn44, #unicorn45, #unicorn46, #unicorn47, #unicorn48, #unicorn49, #unicorn50, #unicorn51, #unicorn52, #unicorn53, #unicorn54, #unicorn55, #unicorn56, #unicorn57, #unicorn58, #unicorn59, #unicorn60, #unicorn61, #unicorn62, #unicorn63”, 3, {drawSVG:”0", delay:”1"})

Вы можете увидеть, как это похоже на наш предыдущий .from Раньше анимация TimelineLite. Мы вызываем наши отдельные объекты (в этом случае мы вызываем более одного одновременно, чтобы все они анимировались одновременно), и мы определяем продолжительность анимации как 3 секунды.

Единственное отличие состоит в том, что в скобках мы сейчас используем drawSVG: “0”. Это вызывает плагин drawSVG и определяет, что каждый путь имеет значение 0. Поскольку мы используем .from пути начинаются со значения 0, затем анимируются до 100% за 3 секунды.

nNJdLZxbk3jzMo91PRFoUzy8a-Nr2Tb-AUpr
Вы можете играть с разными значениями, чтобы получить уникальный стиль анимации.

Другой фрагмент кода в скобках delay: “1”. Это определяет, как долго анимация будет ждать выполнения в секундах. В этом случае мы заявляем, что анимация подождет 1 секунду перед исполнением.

Это самый быстрый способ начать работу с приложением drawSVG, но вы можете манипулировать значениями разными способами, чтобы получить интересные эффекты. Чтобы узнать больше об этом плагине, посетите сайт GSAP.

Заключительные мнения

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

Николас Крамер – дизайнер, который сейчас работает в Barrel в Нью-Йорке. Он решает проблемы дизайна для компаний, помогая им упростить идеи и донести ценность до клиентов.

Будь на связи! Дриббл | LinkedIn | Веб-сайт

Добавить комментарий

Ваш адрес email не будет опубликован.