Abr@X@bra.ru
Модульный кода для анимации GSAP
Модульный кода для анимации GSAP

Модульный кода для анимации GSAP

16.10.2017
155
Если вы когда-либо писали код для анимации, которая длиться более 10 секунд с десятками или даже сотнями элементов, вы знаете, как сложно избежать, чтобы не получился лапша-код. Хуже того, редактирование анимации, которая была построена кем-то другим (или даже вами 2 месяца назад), может быть кошмаром.

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

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




Демо выше от Craig Roblewsky - отличный пример сложной анимаций.

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

Видео 1: Обзор методов

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


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

  • Разделите свою анимацию на более мелкие временные рамки, которые склеиваются на временной шкале.

  • Используйте функции.

Это делает ваш код модульным и легко редактируемым.

Видео 2: подробный разбор

В этом видео подробно показано, как выстроить  последовательность. Вы увидите, как можно упаковать все в одну большую шкалу timeline, без модульного подхода. Затем я разбиваю анимацию на отдельные временные куски и использую параметризованную функцию, которая сделает весь код на 60% меньше!



Давайте рассмотрим ключевые моменты …

Не пишите длинные куски кода

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

Давайте обновим код, чтобы мы могли применить те же самые методы, которые использовал Крейг в анимации SVG …




Обязательно ознакомьтесь с кодам на вкладке «JS». Для новичков, это может быть трудной задачей.

Создавайте отдельный timeline для каждой анимации

Разделяя анимацию на отдельные куски timeline, код становится легче читать и редактировать.

var panel1 = new TimelineLite();
panel1.from(...);
  ...

var panel2 = new TimelineLite();
panel2.from(...);
  ...

var panel3 = new TimelineLite();
panel3.from(...);
  ...

Теперь гораздо проще выполнить быстрый поиск и найти код для panel2. Однако, когда эти временные рамки создаются, они все будут играть мгновенно, но мы хотим, чтобы они были упорядочены.




Нет проблем - просто вставьте их на timeline шкалу в нужном порядке.

Добавление timeline с помощью add ()

Одной из величайших особенностей инструментов timeline GSAP (TimelineLite / TimelineMax) является возможность размещения анимаций так, как вы хотите.

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


//create a new parent timeline
var master = new TimelineMax();

//add child timelines
master.add(panel1)
  .add(panel2)
  .add(panel3);

Полноценное демо этого этапа:



Анимация работает одинаково, но код стал более лаконичен и легко читается.

Некоторые ключевые преимущества такого подхода:

  • Читать код проще.

  • Измените порядок разделов, просто переместив код в add ().

  • Изменить скорость отдельной сцены анимации.

  • Точный контроль за размещением каждой временной шкалой.

Использования функций

Последним шагом в оптимизации этого кода является создание функции, которая генерирует анимацию. Функции по своей сути являются мощным инструментом:

  • Можно вызывать много раз.

  • Может быть параметризована для изменения анимации, которую они создают.

  • Позволяет вам определить локальные переменные, которые не будут конфликтовать с другим кодом.

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

Наша функция принимает один параметр panel, который используется в селекторах:

function createPanel(panel) {
  var tl = new TimelineLite();
  tl.from(panel + " .bg", 0.4, {scale:0, ease:Power1.easeInOut})
    .from(panel + " .bg", 0.3, {rotation:90, ease:Power1.easeInOut}, 0)
    .staggerFrom(panel + " .text span", 1.1, {y:-50, opacity:0, ease:Elastic.easeOut}, 0.06)
    .addLabel("out", "+=1")
      .staggerTo(panel + " .text span", 0.3, {opacity:0, y:50, ease:Power1.easeIn}, -0.06, "out")
    .to(panel + " .bg", 0.4, {scale:0, rotation:-90, ease:Power1.easeInOut});
  return tl; //very important that the timeline gets returned
}

Затем мы можем построить последовательность из всех временных интервалов, поместив их на шкалу времени, используя add ().

var master = new TimelineMax();
master.add(createPanel(".panel1"))
  .add(createPanel(".panel2"))
  .add(createPanel(".panel3"));
Демо с полным кодом:



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

Вот еще один прекрасный пример использования функций от Sarah Drasner.



И, конечно, та же самая техника используется на главной страницы GSAP:



GSDevTools

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

Вывод

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





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

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

Цель этой второй части GreenSock для начинающих - познакомить вас с TimelineMax от GreenSock.
Читать
GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)

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

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

3 новых CSS-функции для изучения в 2017 году

В этом посте, поговорить хочу про CSS, а если быть точнее про новые его фишки которые стоить знать.
Читать