AnimationTimeline

The Animation object is responsible for making one cut in the animation, while the AnimationTimeline object is responsible for connecting the created cuts. If there are not many Animation objects, then you can use the oncomplete event to specify the timing of the animation, but if there are many Animation objects, it may be inconvenient to manage within the event function. The AnimationTimeline object makes it easier to manage when animation effects are applied.

Example

One way to manage the timeline is to select "Start After Previous" as an option when animating in the presentation tool.

Creating AnimationTimeline

The AnimationTimeline object does not appear in the Nexacro Studio toolbar. You need to create a new object in the script. If you add the AnimationTimeline object in the onload event function of the form object, create the event function as follows.

this.form_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var anitimeObj = new nexacro.AnimationTimeline("Anitime00", this);
	this.addChild("Anitime00", anitimeObj);
}

Since it is not displayed on the screen, do not call the show method after calling the addChild method.

The Animation object to apply the animation effect must be added. Add it using the addTarget method.

this.Anitime00.addTarget("AniTimeItem00", aniObj00);

When using the AnimationTimeline object, do not use the play method of individual Animation objects but use the play method of the AnimationTimeline object.

this.Anitime00.play();

Processing Animation in Order

With the Animation object, the oncomplete event was used, but this time, the AnimationTimeline object is used to process the animation in order.

Example

Apply animation effects to the Button00 and Button01 components. When the [play] button is clicked, the animation effect applied to the Button00 component is executed, and when the animation effect ends, the animation effect applied to the Button01 component is executed.

sample_animationtimeline_01.xfdl

Core features used in the example

addTarget

This is the same as the method name of the Animation object, but the addTarget method of AnimationTimeline object specifies only the target Animation object and does not specify the props property value. You can specify nOffset as the third parameter, and if not, then it is processed as 0.

How to implement an example

Place the Button component on the screen. Set the text property values of the Button component placed at the top to "play", "init".

Create the AnimationTimeline, Animation objects within the onload event function of the Form object and execute the addTarget method to specify two Animation objects as targets.

this.sample_animationtimeline_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var anitimeObj = new nexacro.AnimationTimeline("Anitime00", this);
	this.addChild("Anitime00", anitimeObj);
	
    var aniObj00 = new nexacro.Animation("Ani00", this);
    this.addChild("Ani00", aniObj00);
    this.Ani00.addTarget("AniItem00", this.Button00, "left:300");
	
    var aniObj01 = new nexacro.Animation("Ani01", this);
    this.addChild("Ani01", aniObj01);
    this.Ani01.addTarget("AniItem00", this.Button01, "left:300");  
	
	this.Anitime00.addTarget("AniTimeItem00", aniObj00);
	this.Anitime00.addTarget("AniTimeItem01", aniObj01);
};

Write the event function to process the function to control the animation effect when the top button is clicked. Execute the play method of the AnimationTimeline object, not the play method of the Animation object.

this.btnPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    this.Anitime00.play();
};

this.btnInit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Button00.set_left(20);
	this.Button01.set_left(20);
};

Run it with QuickView (Ctrl + F6) and click the top button to see the animation effect applied.