GreenSock animation platform Study Notes (3) TimelineLite

TimelineLite is a lightweight, easy-to-use time axis that can be used to establish and manage queues composed of instances such as TweenLite, TweenMax, TimelineLite, and TimelineMax. As you can imagine, A TimelineLite instance is like a virtual video editing Timeline or a container where you can place any animation or Timeline on the basis of time control.

TimelineLite instance attributes

CurrentProgress: Number[Read/write] is used to set or read the animation progress. For example, 0 indicates start, 0.5 indicates half, and 1 indicates completion. TotalProgress has the same meaning as currentProgress in TimelineLite, but in TimelineMax, totalProgress includes loops and cycle intervals.

Duration: Number[Read/write] is used to set or read the duration (or number of frames) of the Timeline)

TimeScale: Number[Read/write] is used to set or read the playback speed of the timeline. For example, 0.5 is half the speed, 1 is normal speed, and 2 is twice the speed.

TotalDuration: Number[Read/write] is used to set or read the total duration (or number of frames), including the cycle and cycle interval.

UseFrame: Boolean[Read] whether frame mode is enabled

 

TimelineLite instance method

TimelineLite(Vars: Object = null)

The constructor of the TimelineLite class. Input a vars object as a parameter

 

Append(Tween: TweenCore, offset: Number = 0): TweenCore

Note: Add a TweenLite, TweenMax, TimelineLite, and TimelineMax animation instance at the end of the timeline.

Parameter: tween: The TweenLite, TweenMax, TimelineLite, and TimelineMax animation instances to be added.

Offset: the number of seconds (or frames) to be offset relative to the end of the timeline. For example, if the animation you want to add has a 3-second gap with the last animation on the original timeline, you can set this parameter to 3. For example, the animation you want to add overlaps with the last animation on the original timeline in 2 seconds, then you can set this parameter to-2.

This method returns the added animation instance.

Insert(Tween: TweenCore, timeOrLabel: * = 0): TweenCore

Note: Insert a TweenLite, TweenMax, TimelineLite, and TimelineMax animation instance to the specified time, frame, or tag.

Parameter: tween: The TweenLite, TweenMax, TimelineLite, and TimelineMax animation instances to be inserted.

TimeOrLabel: Specifies the animation insertion time point, which can be the number of seconds (or the number of frames), and the label (represented by a string)

This method returns the inserted animation instance.

AppendMultiple(Tweens: Array, offset: Number = 0, align: String = "normal", stagger: Number = 0): Array

Note: Multiple TweenLite, TweenMax, TimelineLite, and TimelineMax animation instances can be added at one time to the end of the timeline.

Parameter: tweens: An array containing the animation instance to be added

Offset: the number of seconds (or frames) to be offset relative to the end of the timeline)

Align: The arrangement mode of the added animation. Because there are multiple animations added, You need to determine how they are arranged. The three modes are optional: TweenAlign. SEQUENCE: the added animations are arranged one by one in SEQUENCE; TweenAlign. START: overlaps all added animations and ignores their delay and TweenAlign. NORMAL: overlaps all added animations without ignoring their delay.

Stagger: The time interval between running of each added animation, in seconds.

This method returns an array of added animation instances.

InsertMultiple(Tweens: Array, timeOrLabel: String = "0", align: Number = normal, stagger: * = 0): Array

Note: Multiple TweenLite, TweenMax, TimelineLite, and TimelineMax animation instances are inserted to the specified time, frame number, or tag at one time. The usage is the same as that of appendMultiple.

Prepend(Tween: TweenCore, adjustLabels: Boolean = false): TweenCore

Note: At the beginning of the timeline, insert a TweenLite, TweenMax, TimelineLite, and TimelineMax animation instance, which will squeeze the subsequent animations backward.

Parameter: tween: Specifies the animation instance to be inserted.

AdjustLabels: If this parameter is set to true, labels on the timeline are moved back to the squeezed animation.

This method returns the inserted animation instance.

PrependMultiple(Tweens: Array, align: String = "normal", stagger: Number = 0, adjustLabels: Boolean = false): Array

Note: Multiple TweenLite, TweenMax, TimelineLite, and TimelineMax animation instances are inserted at the beginning of the timeline at a time, which will squeeze the subsequent animations backward. Same as appenfMultiple

AddLable(Label: String, time: Number): void

Note: Add a frame tag on the timeline. In the future, you can directly use this tag as a parameter for gotoAndStop () gotoAndPlay ().

Parameter: label name

Time: specifies the time (or number of frames) at which the tag is to be added, in seconds.

RemoveLable(Label: String): Number

Note: Remove a tag from the timeline and return the time point of the tag.

Parameter: lable: name of the tag to be removed

Goto(TimeOrLabel: *, suppressEvents: Boolean = true): void

Note: This is equivalent to redirecting the playback header to a specific time point (or number of frames) or tag without changing the pause status of the timeline.

Parameter: timeOrLable: the number of seconds (or the number of frames) or tag to jump

SuppressEvents: If this parameter is set to true, the arrival of the playback header will not trigger onComplete, onUpdate, or other events.

GotoAndPlay(TimeOrLabel: *, suppressEvents: Boolean = true): void

Views the playback header to a specified place and plays it from there.

Parameter: timeOrLable: the number of seconds (or the number of frames) or tag to jump

SuppressEvents: If this parameter is set to true, the arrival of the playback header will not trigger onComplete, onUpdate, or other events.

GotoAndStop(TimeOrLabel: *, suppressEvents: Boolean = true): void

Views the playback header to a specified place and pauses the timeline.

Parameter: timeOrLable: the number of seconds (or the number of frames) or tag to jump

SuppressEvents: If this parameter is set to true, the arrival of the playback header will not trigger onComplete, onUpdate, or other events.

Stop ():Void

Note: The animation should not be stopped.

GetChildren(Nested: Boolean = true, tweens: Boolean = true, timelines: Boolean = true, ignoreBeforeTime: Number =-9999999999): Array

Note: You can obtain all animation and timeline instances in the timeline, including nested

Parameter: nested: if it is true, the nested animation instance or timeline instance will also be included; otherwise, only the top-level

Tweens: If this parameter is set to true, an animation instance is included.

Timelines: If this parameter is set to true, a timeline instance is included.

IgnoreBeforeTime: the animation or timeline with a start time less than this number is ignored

GetLableTime(Label: String): Number

Description: Time Point of the returned tag. If the tag does not exist,-1 is returned.

Parameter: lable: Target Tag Name

GetTweensOf(Target: Object, nested: Boolean = true): Array

Returns an animation instance of a specific object.

Parameter: target object

Nested: if true, the nested timeline instance in the animation will also return

KillTweensOf(Target: Object, nested: Boolean = true, vars: Object = null): Boolean

Deletes one or more animations of an object.

Parameter: target object

Nested: whether nested animation is affected

Vars: Specifies the animation attribute to be deleted, for example, {alpha: true, x: true}. If this parameter is omitted, all animation attributes will be deleted.

Remove(Tween: TweenCore, skipDisable: Boolean = false): void

Note: Remove a TweenLite, TweenMax, TimelineLite, or TimelineMax instance from the timeline.

Parameter: tween: The TweenLite, TweenMax, TimelineLite, or TimelineMax instances to be removed.

SkipDisable: Generally, keep the default value of skipDisable. I cannot understand what it means.

Clear(Tweens: Array = null): void

Note: This function is used to clear all animations and timeline instances on the timeline. If an array parameter is input, a specific animation can be deleted.

Parameter: tweens: an array of animations to be deleted

ShiftChildren(Amount: Number, adjustLabels: Boolean = false, ignoreBeforeTime: Number = 0): void

Note: the start time of all animations in the timeline is pushed back for a certain period of time to leave a certain amount of space.

Parameter: amount: number of seconds (or frames) to be extended)

AdjustLabels: if true, the lable on the timeline is adjusted accordingly.

IgnoreBeforeTime: All the start time of the animation starting at this time or after this time will be pushed back.

Invalidate ()