В финале этой серии я рад представить вам функции, которые делают TimelineMax таким особенным. Я также коснусь некоторых специальных трюков, которые вы можете сделать с TimelineLite, чтобы вы могли применять эффекты дикой легкости к общей скорости воспроизведения временной шкалы, которая включает в себя сотни анимаций и вложенных временных шкал. Вы должны увидеть это, чтобы поверить.
TimelineMax в действии
SWF ниже содержит один TimelineMax с повторяющимся значением 1 и йо-йо истины. Значения totalTime и totalProgress отражают количество времени, необходимое для выполнения всей последовательности дважды. addCallback() TimelineMax используется для вызова функции, которая обрабатывает обмен глубин addCallback() и куста, чтобы этот двоичный объект мог прыгать за кустом. Этот обмен происходит мгновенно, когда капля завершает свое восходящее движение независимо от того, играет ли временная шкала назад или вперед.
Вы можете найти все файлы, использованные для создания SWF выше, в исходных файлах для этого урока.
Смотреть скринкаст
TimelineMax Специальные свойства
Самая популярная функция TimelineMax в том, что вы можете легко сказать, сколько раз повторить. Существует ряд специальных свойств, которые можно передать в объект vars конструктора TimelineMax, которые помогут вам точно настроить, как работает повтор:
- повторить : сколько раз график должен повториться. Используйте -1, чтобы повторяться бесконечно.
- repeatDelay : количество времени, которое должно пройти до повторения временной шкалы.
- onRepeat: функция, которая будет вызываться, как только повторяется временная шкала.
- yoyo : если установлено значение true, временная шкала будет повторяться в обратном порядке.
|
tl = new TimelineMax( {repeat: 2, repeatDelay: 1, onRepeat: doSomethingCool, yoyo: true } );
|
Код выше создаст временную шкалу, которая делает следующее:
- С самого начала играть вперед.
- Через одну секунду после завершения анимации
doSomethingCool()функцияdoSomethingCool(), и временная шкала мгновенно начнет воспроизводиться в обратном направлении. - Через одну секунду после воспроизведения анимации
doSomethingCool()функцияdoSomethingCool(), и временная шкала будет воспроизводиться мгновенно.
Продолжительность, время и прогресс
Как только временная шкала повторяется, полезно иметь доступ к ряду свойств, которые учитывают длительность всех итераций и задержек:
- totalDuration : продолжительность временной шкалы в секундах (или кадры для временных шкал на основе кадров), включая любые повторы или repeatDelays.
- totalTime : время последнего отображения времени (или кадра для анимации / шкалы времени на основе кадров) в соответствии с его totalDuration.
- totalProgress : значение от 0 до 1, указывающее общий ход временной шкалы в соответствии с ее totalDuration, где 0 находится в начале, 0,5 завершено наполовину, а 1 завершено.
Стоит отметить, что TimelineLite имеет totalTime totalDuration и totalTime но поскольку TimelineLite не повторяется, они предлагают наибольшее значение при использовании с TimelineMax.
Вызов функции из TimelineMax
TimelineMax позволяет легко вызывать функции из любой точки времени. Возможно, вы знакомы с процессом добавления обратного вызова onComplete() к отдельной анимации на временной шкале, но addCallback() предлагает два преимущества:
-
addCallback()будут запущены, когда временная шкала будет воспроизводиться вперед И назад. -
addCallback()не должен бытьaddCallback()к определенному окончанию анимации
addCallback () Подпись метода :
|
public function addCallback(callback:Function, timeOrLabel:Array, params:* = null):TweenLite
|
|
1
2
3
4
5
6
7
8
|
tl = new TimelineMax();
tl.append( TweenLite.to( mc, 5, {x:500} ) );
tl.addCallback ( doSomethingCool, tl.duration-1, [«Steve»]) );
function doSomethingCool(someValue:String):void{
trace(«Hi » + someValue);
}
|
Приведенный выше код приведет к появлению фразы «Привет, Стив» на панели вывода за одну секунду до окончания предыдущей анимации.
Вызов функции из TimelineLite
TimelineLite предлагает аналогичные функциональные возможности, добавляя или вставляя метод TweenLite.delayedCall (), но код немного более подробный.
|
1
2
|
someTimelineLite.append( TweenLite.to( mc, 5, {x:500} ) );
someTimelineLite.append( TweenLite.delayedCall( 0, doSomethingCool, [«Steve»] ), -1 );
|
Скручивание воспроизведения временной шкалы
Один из самых тщательно охраняемых секретов платформы GreenSock Tweening заключается в том, что вы можете использовать TweenLite, TweenMax, TimelineLite и TimelineMax. В видео я сосредоточен на анимации воспроизведения «братьев по шкале времени». Преимущество анимации движения или временной шкалы заключается в том, что вы можете регулировать скорость, с которой он воспроизводится, а также применять замедление.
Промежуток времени Масштаб TimelineLite / Max
Этот метод отлично подходит для медленного прекращения анимации в любой момент времени или возобновления игры с приятной непринужденностью. Обратите внимание на приятную легкость, которая применяется при входе или выходе из приостановленного состояния.
Объедините анимацию TimelineMax’s () с легкостью
Этот метод хорошо подходит для облегчения скорости воспроизведения всей временной шкалы или только сегмента. Обратите внимание на радикальные изменения в воспроизведении временной шкалы при нажатии кнопок Circ In Out и Bounce Out .
Надеемся, что приведенный выше SWF соблазнит вас узнать больше, посмотрев видео и загрузив исходные файлы .
Вывод
TimelineMax может сделать больше вещей, но я решил сосредоточиться на наиболее часто используемых функциях. Я ознакомил вас со свойством TimelineMax currentLabel и getLabelAfter() в части 4: Работа с метками . Как всегда, я рекомендую прочитать и добавить в закладки документацию TimelineMax, чтобы быть уверенным, что вы получаете максимальную отдачу от выбранных вами инструментов. Я все еще узнаю что-то новое каждый раз, когда я там прохожу.
Для меня было потрясающим опытом поделиться с вами почти тремя часами обучения TimelineLite / Max. Я уверен, что если вы потратите время на просмотр каждого видео и поэкспериментируете с исходными файлами, у вас будет невероятно прочная основа, на которой можно начать опираться. Потенциал того, что вы можете достичь с помощью TimelineLite / Max, практически безграничен. Я искренне надеюсь, что вы так же, как и я, взволнованы тем, что можно сделать с помощью этих удивительных инструментов.
Для тех из вас, кто хочет продолжить свое образование TimelineLite / Max, я уверен, что вы найдете следующие уроки очень полезными:
- Пуленепробиваемые переходы страницы TimelineMax : узнайте, как перемещаться по многим участкам временной шкалы с помощью пользовательских переходов.
- TimelineMax Generative Art : используйте TimelineMax для веселого и случайного опыта.
- TimelineLite с ООП : взгляните на интеграцию TimelineLite в пользовательские классы для упрощения упорядочения, гибкости и организации.
Я должен выразить особую благодарность Джеку Дойлу из GreenSock за создание этих удивительных инструментов, а также за его поддержку в создании этих видео. Никогда в жизни я не сталкивался с создателем бизнеса или продукта, который настолько старается, чтобы Джек оставил своих клиентов и легионы энтузиастов такими чертовски счастливыми.
Большое спасибо за просмотр этой серии и обратной связи. Если вы хотите связаться со мной по любым вопросам, связанным с TimelineLite / Max, пожалуйста, оставьте комментарий ниже или отправьте электронное письмо. Вы можете найти мой адрес электронной почты в конце видео.
-Carl