Я рад представить вам самые мощные инструменты во всей платформе GreenSock Tweening. Все, что я обсуждал в последних четырех видео , было специально разработано для того, чтобы подготовить вас к удивительной силе, которую вы вот-вот увидите. Я собираюсь показать вам два метода, которые изменят подход к любой анимации на основе сценариев с этого момента.
С appendMultiple() и insertMultiple() вы будете иметь точный контроль над секвенированием и синхронизацией сотен анимаций и временных шкал с очень небольшим количеством кода.
TimelineLite в действии
В приведенном ниже SWF родительская временная шкала, которая управляется скруббером, содержит только две строки кода, но в действительности происходит более ста анимаций.
Вы можете найти все файлы, использованные для создания SWF выше, в исходных файлах этого урока .
Смотреть скринкаст
Встречайте appendMultiple ()
appendMultiple() TimelineLite позволяет добавлять множество анимаций и / или шкал времени к шкале времени и точно контролировать относительную синхронизацию всех анимаций / шкал времени. Что делает этот метод настолько мощным, так это то, что он принимает массив анимаций и временных шкал и рассматривает их как одну группу, которую можно смещать и распределять по своему усмотрению.
Чтобы максимально использовать appendMultiple() вы должны понимать все четыре параметра.
appendMultiple(tweens:Array, offset:Number = 0, align:String = "normal", stagger:Number = 0):Array
tweens : Array — массив, содержащий любое или все из следующих: экземпляры TweenLite, TweenMax, TimelineLite и / или TimelineMax
offset : Number (default = 0) — Количество секунд (или кадров для временных шкал на основе кадров), чтобы сместить точку вставки анимации от конца временной шкалы. Например, чтобы начать добавление анимации через 3 секунды после окончания временной шкалы (оставляя 3-секундный интервал), установите смещение равным 3. Или добавьте анимацию так, чтобы точка вставки перекрывалась с последними 2 секундами Временная шкала, установите смещение -2. По умолчанию 0, поэтому точка вставки находится точно в конце временной шкалы.
align : String (default = «normal») — определяет, как анимация будет выравниваться относительно друг друга перед добавлением. Возможные варианты: TweenAlign.SEQUENCE (выравнивает анимацию один за другим в последовательности), TweenAlign.START (выравнивает время начала всех анимаций, игнорируя задержки) и TweenAlign.NORMAL (выравнивает время начала все подростки, соблюдая задержки). Значением по умолчанию является НОРМАЛЬНОЕ.
stagger : Number (default = 0) — переключает анимацию на определенный промежуток времени (в секундах) (или в кадрах для временных шкал на основе кадров). Например, если значение пошагового изменения равно 0,5, а для свойства «align» установлено значение TweenAlign.START, вторая анимация запускается через 0,5 секунды после запуска первой, затем через 0,5 секунды запускается третья и т. Д. Если выполняется выравнивание свойство TweenAlign.SEQUENCE, между каждой анимацией добавляется 0,5 секунды. По умолчанию 0.
Приведенные выше описания были взяты непосредственно из документации GreenSock .
В видео я appendMultiple() о нескольких способах создания массива appendMultiple() будет принимать appendMultiple() . Ниже приведены два самых популярных подхода.
Создать массив уникальных твинов
|
1
2
3
4
5
6
7
8
9
|
tl = new TimelineLite();
//bg tween
tl.insert( TweenMax.to( bg, .5, {alpha:1});
tl.appendMultiple( [TweenLite.from( meet_mc, .5, {x:-100, rotation:-90, scaleX:0, scaleY:0, ease:Back.easeOut} ),
TweenLite.from( the_mc, .5, {y:-100, rotation:-90, scaleX:0, scaleY:0, ease:Back.easeOut} ),
TweenLite.from( blobs_mc, .5, {x:700, rotation:90, scaleX:0, scaleY:0, ease:Back.easeOut} ) ],
0, «sequence», .5);
|
В приведенном выше коде три анимации, добавленные с помощью appendMultiple() будут добавлены сразу после окончания анимации bg, поскольку значение смещения равно 0. Каждая анимация начинается через 0,5 секунды после окончания предыдущей анимации, поскольку для параметра выравнивания установлено значение «sequence» и пошатывание установлено на .5.
Создайте массив похожих анимаций с помощью allFrom ()
TweenMax.allFrom() создает массив анимаций на основе массива объектов. Он применяет одинаковые значения для анимации всех объектов в массиве. Вы также можете использовать TweenMax.allTo() если вы хотите указать, куда объекты должны анимироваться, а не туда, откуда они должны анимироваться.
|
1
2
3
4
5
6
7
|
//create an array of objects to be tweened
allBlobs = [blob1_mc, blob2_mc, blob3_mc, blob4_mc, blob5_mc, blob6_mc, blob7_mc]
tl = new TimelineLite();
//use allFrom() to tween every blob FROM the same set of properties with the same duration.
tl.appendMultiple( TweenMax.allFrom( allBlobs, .3, {scaleX:0, scaleY:0, x:»100″} ), 0, «normal», .1 )
|
Приведенный выше код будет обрабатывать каждый BLOB-объект в течение 0,3 секунды от значений, предоставленных в объекте vars ( {scaleX:0, scaleY:0, x:"100"} ). Каждая анимация запускается через 0,1 секунды после начала предыдущей анимации, потому что режим выравнивания установлен на «нормальный», а пошаговый режим равен 0,1.
Важно отметить, что allFrom() возвращает массив анимаций, и поэтому мы можем использовать его как значение для параметра appendMultiple() в appendMultiple() . Если бы вы использовали allFrom() в append() вы бы получили сообщение об ошибке, так как для этого требуется одна анимация, а не массив.
TweenAlign Visualizer
Режимы выравнивания немного сложно понять, не видя их в действии. Я построил визуализатор TweenAlign, чтобы дать вам простой способ проверить, как они работают, сочетая различные задержки анимации, смещения и смещения.
Используйте приведенный выше SWF для выполнения следующих тестов:
Тест 1: понять разницу между TweenAlign.NORMAL и TweenAlign.START
- Установите задержку 1 бара на 2
- Переключение между
TweenAlign.NORMALиTweenAlign.START
Обратите внимание, как задержка игнорируется с TweenAlign.START
Тест 2: Посмотрите, как по-разному работает Stagger в зависимости от режима выравнивания
- Установите для всех продолжительности анимации 1
- Установите все задержки анимации на 0
- Установите пошатывание на 1
- Переключение между TweenAlign.NORMAL и TweenAlign.SEQUENCE
Обратите внимание, как по-разному работает stagger с TweenAlign.NORMAL и TweenAlign.START:
- Используя
TweenAlign.NORMAL,TweenAlign.NORMAL— это промежуток времени между началом каждой анимации. - С
TweenAlign.SEQUENCE,TweenAlign.SEQUENCE— это промежуток времени между концом анимации и следующей анимацией.
Сойти с ума, комбинируя различные настройки, и следить за тем, как они влияют на время начала каждой анимации и общую продолжительность временной шкалы. Визуализатор TweenAlign также доступен в исходных файлах для этого руководства.
Дополнительные замечания
Хотя в этом тексте я insertMultiple() , insertMultiple() работает практически так же. Единственное отличие от insertMultiple() состоит в том, что параметр смещения относится к точному времени или метке, в которые следует добавить анимацию / временные шкалы. Узнайте больше в документации TimelineLite .
При указании режима выравнивания вы можете ссылаться на статическое константное значение в классе TweenAlign или строковое значение.
TweenAlign.NORMAL аналогичен использованию «normal».
Вывод
Как только вы получите представление о том, как appendMultiple() и insertMultiple() вас в основном появляется безграничный потенциал для создания сложных и гибких анимаций с очень небольшим количеством кода. Я искренне надеюсь, что демонстрация вложения нескольких TimelineLites вдохновит вас на создание действительно замечательных эффектов. Просто добавив немного случайности на каждую временную шкалу, вы действительно сможете перейти на следующий уровень анимации и сохранить безумный контроль.
Возможно, теперь у вас есть знания и сила, чтобы попробовать эффект «звездного взрыва», который был показан в видео » Введение в TimelineLite» ? Если подумать, я ставлю этот вызов в качестве домашней работы.
В следующем уроке я собираюсь показать некоторые функции, эксклюзивные для TimelineMax, и некоторые другие приемы, которые вы можете сделать со всеми вашими временными шкалами.
Если у вас есть какие-либо вопросы или комментарии к этому уроку, просто оставьте комментарий ниже.
Спасибо за просмотр!