Abr@X@bra.ru
GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)
GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)

GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)

25.07.2017
498

Моя цель в этой статье - дать вам подробное введение в GreenSock, также известную как GSAP (GreenSock Animation Platform), суперэффективный, профессиональный класс анимации HTML5.

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

Более детально о том, что будем изучать:

  • В конце этой первой части вы узнаете о возможностях и функциях GreenSock, модели лицензирования, основных компонентах и базовом синтаксисе для tween и пошаговых элементов DOM.

  • В части 2 я расскажу о собственной функциональности Timeline от GreenSock.

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

Что такое GreenSock?

GreenSock - де-факто промышленная стандартная платформа анимации JavaScript.

Это библиотека JavaScript, для анимации на основе Flash. Это означает, что ребята, стоящие за GreenSock, знают, про веб-анимация все, библиотека существует уже давно и никуда не собирается в ближайшее время уходить.

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

Хочу упомянуть три вещи, которые мне особенно нравятся в GreenSock:

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

Благодаря мощной функциональности Timeline, GSAP обеспечивает точное управление таймингами не только одиночных твинов, но и нескольких частей всего потока анимации.

Основные инструменты GreenSock

Это модули GreenSock:

  • TweenLite - основа GSAP, легкая и быстрая библиотека анимации HTML5

  • TweenMax - расширение TweenLite, которое помимо самого TweenLite включает в себя:

  • TimelineLite

  • TimelineMax

  • CSSPlugin

  • AttrPlugin

  • RoundPropsPlugin

  • DirectionalRotationPlugin

  • BezierPlugin

  • EasePack

  • TimelineLite - облегченная версия.

  • TimelineMax - расширенная версия TimelineLite, которая предлагает дополнительные, не связанные с этим функции, такие как repeat, repeatDelay, yoyo и другие.

Вы можете включить TweenLite в свой проект, а затем добавить другие модули по мере необходимости. В качестве альтернативы вы можете включить TweenMax (подход, который я собираюсь взять в этой серии из нескольких частей), который упаковывает все основные модули в один оптимизированный файл.

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

Tweening с помощью GreenSock

Простая анимация состоит из какого-то изменения, которое происходит из точки A в точку B. Аниматоры имеют специальное имя для состояний между A и B, т.е. Tween.

TweenLite и TweenMax являются двумя мощными инструментами Tweening, которые GreenSock предоставляет вам. Как я уже сказал выше, я собираюсь работать с TweenMax, но помните, что основной синтаксис в обеих библиотеках одинаковый.

Чтобы загрузить GSAP в свой проект, добавьте этот тег <script> перед закрывающим тегом </ body> вашего документа HTML:

Вы можете найти последнюю версию на CDN здесь: cdnjs.com.

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

Если вы используете npm:

npm install gsap

В CodePen вы найдете ссылку на GSAP TweenMax в окне быстрого добавления JavaScript библиотек:


Базовый синтаксис GreenSock

Простая анимация с GSAP выглядит так:

TweenMax.to('.my-element', 1, {opacity: 0});

Анимируем элемент DOM с классом my-element. Через одну секунду анимации элемент больше не будет виден.

Давайте разберем все более подробно.

TweenMax.to () сообщает браузеру, что вы используете метод to () от библиотеки TweenMax (синтаксис TweenLite одинаковый, замените TweenMax на TweenLite). Этот метод требует нескольких аргументов, разделенных запятыми:

  • Элемент, который вы хотите оживить ('.my-element')

  • Продолжительность анимации (в данном случае 1 секунда)

  • Объект vars {}, то есть свойства, которые вы хотите изменить (в этом случае свойство прозрачности). Эта последняя часть переходит в фигурные скобки и принимает форму пары ключ / значение. Значение выражает конечное состояние анимации. Существуют и другие свойства, которые вы можете использовать внутри объекта vars {}, например, функции обратного вызова, задержки и т. д.

Как следует из названия, метод to () анимирует свойства tweenable от значений по умолчанию до того значения, которое нужно получить в конце анимации.

GSAP предлагает множество методов, но основными из них являются

to()
From()

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

TweenMax.from('.my-element', 1, {opacity: 0});
FromTo()

С помощью этого метода вы указываете значения как для начальной, так и конечной точки в вашей анимации. Синтаксис аналогичен предыдущим методам, но он включает объект vars {} как для начала анимации, from(opacity: 1), так и для конца (opacity: 0):

TweenMax.fromTo('.my-element', 1, {
 opacity: 1 // from state
}, {
 opacity: 0 // to end state
});

Вот все три метода в действии.

Обратите внимание, что для переворота элемента вдоль оси X или Y GreenSock не использует transform: translateX() или transform: translateY(). Скорее, он использует x (как в живой демонстрации), y, xPercent и yPercent.

Имейте в виду, что для перевода элемента по координатам X или Y вам необходимо установить свойство позиции CSS элемента как relative, так и absolute.

Какие свойства CSS использует GSAP?

С помощью GreenSock все анимационные свойства CSS находятся под рукой. Вы можете анимировать преобразования CSS, такие совйство как box-shadow: 1px 1px 1px rgba (0,0,0,0,5) и border: 1px solid red. Пишутся с использованием camelCase, где стандартное имя свойства CSS использует черту (-), например, backgroundColor.

Использование метода set() в GreenSock

Если перед анимацией вам нужно установить некоторые свойства с определенными значениями, вы можете сделать это либо в своем CSS, либо с помощью метода set() в GreenSock. Этот последний вариант дает преимущество сохранения всего вашего кода, связанного с анимацией, в одном месте, то есть в документе JavaScript.

Например, первый пример в живом демо выше начинается с изображения, установленного в слегка скошенном положении. Этот свойство не указано в CSS, а написано в JavaScript с использованием метода set() в GSAP, например:

TweenMax.set(toElement, {rotation: -45});

Создание Tweens с помощью GreenSock

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

Например, в примере кода ниже, нажатие кнопки вызывает следующую последовательность анимации:

  • Появится окно для ввода

  • Когда окно ввода увеличивается, кнопка

  • Наконец, в поле ввода появляется небольшая кнопка «Отправить».

Вот пример кода GSAP:

// input box appears and gets bigger
TweenMax.to(emailInput, 0.5, {
 autoAlpha: 1,
 scale: 1
});

// the button being clicked disappears
TweenMax.to(this, 1, {
 autoAlpha: 0
});

// the send button appears and gets bigger
TweenMax.to(sendButton, 0.5, {
 autoAlpha: 1,
 scale: 1,
 delay: 0.5,
 ease: Back.easeOut.config(3)
});

В графике ниже вы можете увидеть два новых свойства - autoAlpha и ease.

Вы можете использовать autoAlpha вместо прозрачности, когда вам нужно убедиться, что элемент не только исчезнет, но и пользователи не смогут взаимодействовать с ним. На самом деле autoAlpha добавляет: opacity: 0.

Свойство ease позволяет вам смягчить вашу анимацию, ease контролируют скорость изменения всей анимации. Это важный ингредиент для естественной, реалистичной и плавной анимации, и GreenSock предлагает Ease Visualizer, чтобы выбрать и посмотреть как работают разные эффекты.


После нескольких попыток я выбрал функцию Back.easeOut для этой конкретной анимации, но вы можете экспериментировать и придумывать что-то другое.

Вот полная демо-версия на CodePen.

Ошеломляющие анимации с помощью GreenSock

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

GSAP TweenMax предлагает методы staggerTo(), staggerFrom() и staggerFromTo(), которые работают аналогично описанным выше методам. Только эффект отличается, и он требует дополнительного аргумента сразу после объекта vars {}, чтобы указать количество времени, которое вы хотите пройти между каждой ступенью.

Вот пример:

TweenMax.staggerFrom(alice, 0.5 {
 rotation: 0,
 delay: 1.5,
 ease: Power4.easeIn
}, 0.5);

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

DEMO

Контроль над вашими GSAP Tweens

У GreenSock есть несколько методов, чтобы вы могли полностью контролировать свои tweens.

Play()

Воспроизводит анимацию из любой точки:

// plays from the playhead's current location
myAnimation.play();

// starts playing from 2 seconds into myAnimation 
// (all events and callbacks before then don't get fired)
myAnimation.play(2);

// starts playing from 2 seconds into myAnimation but
// doesn't suppress events or callbacks in the initial 
// part of myAnimation (earlier than 2 seconds)
myAnimation.play(2, false);

Pause()

Приостанавливает вашу анимацию:

// pauses myAnimation in all its entirety
myAnimation.pause();

// jumps 2 seconds into myAnimation and then pauses
myAnimation.pause(2);

// jumps 2 seconds into myAnimation then pauses but 
// doesn't suppress events/callbacks during the 
// initial phase of the tween (earlier than 2 seconds)
myAnimation.pause(2, false);

Reverse()

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

// moves backwards from wherever the playhead currently is

myAnimation.reverse();

// moves backwards from exactly 2 seconds into myAnimation 

myAnimation.reverse(2);

// moves backwards from exactly 2 seconds into myAnimation
// but doesn't suppress events/callbacks before then
myAnimation.reverse(2, false);
Restart () 

перезапускает вашу анимацию и воспроизводит ее с самого начала:

// restarts myAnimation, bypassing any predefined delay
myAnimation.restart();

// restarts myAnimation, including any predefined delay,
// and doesn't suppress events/callbacks during
// the initial move back to time:0
myAnimation.restart(true, false);
Resume() 

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

// resumes myAnimation from the playhead's current position
myAnimation.resume();

// jumps to exactly 2 seconds into myAnimation 
// and then resumes playback:
myAnimation.resume(2);

// jumps to exactly 2 seconds into myAnimation 
// and resumes playback but doesn't suppress 
// events/callbacks during the initial move:
myAnimation.resume(2, false);

Невозможно перечислить все методы, доступные вам от TweenLite и TweenMax GSAP. Поэтому я рекомендую вам почитать документацию.

TweenMax yoyo, repeat и repeatDelay

Я хотел бы закрыть эту первую статью, посвященную GreenSock, с тремя полезными функциями, которые вы можете использовать в анимациях TweenMax:

Repeat - используйте его, если вы хотите, чтобы ваш tween играл определенное количество раз или на неопределенный срок. В этом последнем случае установите для параметра repeat значение -1:

// the tween repeats 3 times on top of the default 
// time (4 times overall):
TweenMax.to(element, 1, { 
 opacity: 0,
 repeat: 3 
});

RepeatDelay - вы можете использовать это свойство для установки определенной задержки между каждым повторением вашей анимации:

// the tween repeats 3 times on top of the default 
// time (4 times overall) with one a second delay 
// between each repetition:
TweenMax.to(element, 1, { 
 opacity: 0,
 repeat: 3,
 repeatDelay: 1 
});

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

// the tween repeats indefinitely with one second's delay 
// between each repetition. The element alternates 
// between being fully opaque and fully transparent:
TweenMax.to(element, 1, { 
 opacity: 0,
 repeat: -1,
 repeatDelay: 1 
});

DEMO

Вывод

В этой первой части, посвященной библиотеке GreenSock, я обсудил, что выделяет GreenSock, ее возможности, основные компоненты.

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




GSAP
Читайте также:
Vue.js 2 + Firebase

Vue.js 2 + Firebase

Создание веб-приложений в режиме реального времени с использованием Vue.js 2 и Firebase.
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
PhpStorm, правильная настройка для web-разработки

PhpStorm, правильная настройка для web-разработки

В этом посте хочу поделится своим опытом, как правильно работать с IDE PhpStorm и удаленным web сервером. ...

Читать