Статьи

TimelineLite Ultimate Руководство для начинающих: основные методы и свойства

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


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



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

insert () — добавляет анимацию к временной шкале в определенное время. Если время вставки не указано, анимация будет вставлена ​​с начальным временем 0 секунд.

1
2
3
4
//this tween will be inserted at the beginning of the timeline
 tl.insert( TweenLite.to( mc, 1, {x:100} ) );
//this tween will be inserted 2 seconds into the timeline
 tl.insert( TweenLite.to( mc, 1, {x:100} ), 2);

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

1
2
3
4
//this tween will directly after all previous tweens have finished
 tl.append( TweenLite.to( mc, 1, {x:100} ) );
//this tween will play 1 second before all previous tweens have finished
 tl.append( TweenLite.to( mc, 1, {x:100} ), -1 );

prepend () — добавляет анимацию к началу временной шкалы и продвигает все существующие анимации вперед во времени.

1
//this tween occur before any other tweens that exist in the timeline tl.prepend( TweenLite.to( mc, 1, {x:100} ) );

Следующие свойства очень полезны для добавления функциональности к вашим временным шкалам и для отладки:

  • timeScale — множитель, описывающий скорость временной шкалы, где 1 — нормальная скорость, 0,5 — половинная скорость, 2 — двойная скорость и т. д.
  • currentProgress — значение от 0 до 1, указывающее ход временной шкалы в соответствии с ее продолжительностью, где 0 — начало, 0,5 — половина завершена, а 1 — конец.
  • длительность — продолжительность временной шкалы в секундах

При создании TimelineLite вы можете передать ряд «специальных свойств» в конструктор. Видео демонтируется при обновлении, завершении и приостановке. Все специальные свойства содержатся в объекте vars.

1
2
3
//this timeline will be paused initially and when it is done
//it will call a function called completeHandler
tl = new TimelineLite( {onComplete:completeHandler, paused:true} );

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

Следующее видео этой серии будет посвящено управлению TimelineLite во время его воспроизведения. Он будет охватывать все, от базового play() и reverse() до добавления интерактивного элемента управления скруббера.


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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//constructor
tl = new TimelineLite();
 
 
//tweens that introduce car.
//insert() puts them all at a time of 0 seconds
tl.insert( TweenMax.from(gti_mc, .5, {x:-500, blurFilter:{blurX:140}}) );
tl.insert( TweenLite.from(gti_mc.wheel1_mc, .5, {rotation:-180}) );
tl.insert( TweenLite.from(gti_mc.wheel2_mc, .5, {rotation:-180}) );
 
//append() adds tweens relative to the end of the timeline
//.5 seconds after previous tweens end this text will show for 1 second and then fade out
tl.append( TweenMax.from(hello_mc, .5, {alpha:0, repeat:1, repeatDelay:1, yoyo:true}) ,.5);
 
//introduce second text .5 seconds after previous tween ends
tl.append( TweenMax.from( colors_mc, .5, {alpha:0}), .5 );
 
//tint sequence
tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:blue}) , .5);
tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:red}) , .5);
tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:black}) , .5);
 
//last text
tl.append( TweenMax.from( black_mc, .5, {alpha:0}), 1 );
 
//optional: inserts black box reveal at the beginning of the timeline
tl.prepend( TweenLite.from ( cover_mc, .5, {y:0}) );