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

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

08.09.2017
40

Цель этой второй части GreenSock для начинающих - познакомить вас с TimelineMax от GreenSock. Вы узнаете:

  • Почему вам нужна временная шкала

  • Как включить несколько твинов на временной шкале

  • Как упаковать несколько временных графиков в функции и вложить их в мастер-шкалу времени для большей гибкости.

В конце этого урока вам будет удобно работать с графиком GreenSock, чтобы манипулировать и полностью контролировать несколько твинов.

Для ознакомления с основами GreenSock, в том числе о том, как работать с TweenMax для упорядочивания и ошеломляющей простой анимации, перейдите к части 1.

Статьи GreenSock являются частью серии Beyond CSS: Dynamic DOM Animation Libraries. Вот что я рассмотрел в прошлых выпусках:

  • Анимация DOM с помощью Anime.js касается того, как наилучшим образом использовать анимацию в Интернете и когда вы можете использовать библиотеку анимации JavaScript вместо анимации только для CSS. Затем он фокусируется на Anime.js, бесплатной и легкой библиотеке анимации JavaScript

  • Fun Animation Effects с KUTE.js представляет вам KUTE.js, бесплатную и многофункциональную библиотеку анимации JavaScript

  • Сделайте свой сайт интерактивным и интересным с помощью Velocity.js (нет jQuery) показывает, как использовать Velocity.js, бесплатную анимационную библиотеку с открытым исходным кодом, чтобы создать веб-анимацию

  • GreenSock для начинающих: учебное пособие по веб-анимации (часть 1) - это обзор GreenSock, также известный как GSAP (GreenSock Animation Platform), где я обсуждаю модули библиотеки и модель лицензирования. Я также покажу вам, как закодировать простую анимацию, последовательности твинов и ошеломляющие анимации с помощью GSAP TweenMax.

Зачем вам нужна временная шкала GreenSock для кодирования ваших веб-анимаций?

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

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

Однако было бы полезно контролировать, когда происходит анимация твинов по отношению к другим детям, например, в одно и то же время, за 1 секунду или полсекунды до или после и т. д.

Посмотрите на этот базовый пример:

  • Tween 1: форма круга растет и сжимается, когда он вращается по своим осям X и Y

  • Tween 2: появляется какой-то текст.

Фрагмент GSAP, который делает его работу, выглядит так:

// scale down the text 
// and hide it before the animation begins 
TweenMax.set('.example__title', { 
  scale: 0.2, 
  autoAlpha: 0
});

// scale the circle shape down before 
// the animation begins
TweenMax.set('.example__ball', {
  scale: 0.2
});

// tween 1
TweenMax.to('.example__ball', 0.5, {
  rotationX: 360,
  rotationY: 180,
  scale: 1,
  ease: Elastic.easeIn.config(2, 1)
});

// tween 2
TweenMax.to('.example__title', 0.5, {
  autoAlpha: 1,
  scale: 1,
  ease: Back.easeOut.config(4)
});
Как вы можете видеть, оба элемента запускаются одновременно, что не является желаемым эффектом:



Если вы хотите, чтобы текст отображался только тогда, когда фигура перестала вращаться, вам нужно добавить соответствующую задержку для tween2, например:

// tween 2
  TweenMax.to('.example__title', 0.5, {
  // rest of the code here
  delay: 0.6
});



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

Координация нескольких элементов с графиком GSAP

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

В качестве первого шага в шкале времени GreenSock попробуйте поместить tweens в фрагменты выше внутри временной шкалы.

Вот как выглядит код:

// instantiate TimelineMax
const tl = new TimelineMax();

// scale down the text 
// and hide it before the animation begins
tl.set('.example__title', { 
  scale: 0.2, 
  autoAlpha: 0
})
 // scale the circle shape down before 
 // the animation begins
 .set('.example__ball', {
  scale: 0.2
})
 // tween 1: rotate shape on X and Y axis
 // scale it up to its regular dimensions
 // add a fun ease
.to('.example__ball', 0.5, {
  rotationX: 360,
  rotationY: 180,
  scale: 1,
  ease: Elastic.easeIn.config(2, 1)
})
 // tween 2: make text appear and 
 // scale it up to its regular size
 // add a fun ta-da ease
.to('.example__title', 0.5, {
  autoAlpha: 1,
  scale: 1,
  ease: Back.easeOut.config(4)
});

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

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

После того, как вы получили свой экземпляр, вы можете использовать большинство методов, с которыми вы уже знакомы из Части 1, например:

to(), from(), fromTo()
Вышеприведенный код начинается с настройки нескольких значений для ваших элементов до начала анимации с помощью:
set()
Подобно тому, как вы использовали:
set()
с TweenMax, вы можете использовать тот же метод с временной шкалой для достижения тех же целей, то есть установить значения свойств ваших элементов, чтобы изменения вступили в силу немедленно, без изменения с течением времени, которое является типичным для анимации. Вы можете больше узнать об использовании set на странице документации.

Остальная часть кода не отличается от того, что вы ранее писали с помощью TweenMax, единственное отличие состоит в том, что теперь вы привязываете методы TimelineMax. Как вы можете видеть, синтаксис GSAP остается неизменным во всех его реализациях, что, безусловно, помогает процессу обучения.

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


Параметр положения GreenStock TimelineMax

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

Вы добавляете этот параметр после объекта vars {}, используя относительную инкрементацию:

(-=0.5, +=2)

Добавление - = 1 запускает анимацию за 1 секунду до окончания предыдущей анимации на временной шкале, тогда как + = 1 выведет анимацию через 1 секунду после окончания предыдущей анимации на временной шкале.

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

Вот простой пример:

.to(box1, 1, {
  rotation: 45,
  transformOrigin: 'center bottom',
  ease: Elastic.easeOut
})
.to(box2, 1, {
  rotation: -45,
  transformOrigin: 'center bottom',
  ease: Elastic.easeOut
})

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

Без параметра позиции box2 начнет анимацию, как только box1 завершит анимацию.

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

'-=1'
например:
.to(box1, 1, {
  // code here
})
.to(box2, 1, {
  // code here
}, '-=1') //position parameter
Поскольку первая анимация длится 1 секунду, параметр позиции
'-=1'

ожидает анимацию на 1 секунду, что приведет к одновременному срабатыванию обоих элементов.

Вот код более длинной анимации с использованием параметра position.


Использование меток в качестве значения для параметра позиции

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

Использование меток делает ваш код более читабельным.

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

.add () 
как для TimelineLite, так и для TimelineMax:
tl.add('nameoflabel');
Затем используйте метку в качестве параметра позиции:
// move element horizontally 100px
tl.to(element, 0.5, {
  x: 100
})
.add('go') // add a label
// move element vertically 100px
// with reference to the 'go' label
.to(element, 1, {
  y: 100
}, 'go');
// rotate otherElement 
// with reference to the 'go' label
.to(otherElement, 0.5, {
  rotation: 360
}, 'go');

В приведенном выше фрагменте элемент перемещается на 100 пикселей вправо. Как только эта анимация заканчивается, оба элемента и другой элемент обновляются одновременно, потому что они оба ссылаются на метку go (просто дайте ярлыкам имя, которое имеет смысл в контексте вашей анимации).

Вы также можете использовать метки с относительными значениями. Например, если вы хотите, чтобы otherElement срабатывал через 2 секунды, используйте параметр:

position: 'go + = 2'
В следующей демонстрации обратите внимание, как некоторые анимации, координируются с использованием меток в качестве параметра позиции:



Вы можете узнать больше о параметре позиции на веб-сайте GSAP.

Делайте то, что вы любите и любите то, что вы делаете!


GSAP
Читайте также:
Boilerplate - помощник front-end разработчику

Boilerplate - помощник front-end разработчику

Каждый уважающий себя front-end разработчик, перед которым стоит задача, сверстать макет сайта или сделать SPA приложени...
Читать
GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)

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

Моя цель в этой статье - дать вам подробное введение в GreenSock, также известную как GSAP (GreenSock Animation Plat...
Читать
CSS Grid, подробное руководство по гридам с примерами

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

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