В первой части этой серии мы рассмотрели возможности TimelineLite. В этом видео я покажу вам, как начать работу с вашей первой анимацией TimelineLite. Вы узнаете о различных методах и свойствах, которые станут основой для всех уроков, продвигающихся вперед.
TimelineLite в действии
Вы можете найти все файлы, использованные для создания SWF выше, в исходных файлах для этого урока .
Смотреть скринкаст
TimelineLite Основные методы
Следующие методы используются для добавления анимации в 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} ) );
|
TimelineLite Основные свойства
Следующие свойства очень полезны для добавления функциональности к вашим временным шкалам и для отладки:
- timeScale — множитель, описывающий скорость временной шкалы, где 1 — нормальная скорость, 0,5 — половинная скорость, 2 — двойная скорость и т. д.
- currentProgress — значение от 0 до 1, указывающее ход временной шкалы в соответствии с ее продолжительностью, где 0 — начало, 0,5 — половина завершена, а 1 — конец.
- длительность — продолжительность временной шкалы в секундах
TimelineLite Специальные свойства
При создании 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
Ниже приведен пример кода, используемого в видео для иллюстрации базовой структуры 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}) );
|