Introducing Animation

The animation function is used to make the data stand out or to emphasize a specific function. For example, you can add a wiggle effect when you enter an incorrect value in the Edit component, or you can highlight the data being updated.

Example

Creating a counter effect to highlight the data displayed on the screen is also utilizing the animation function.

Creating Animation

The Animation object is not displayed on the Nexacro Studio toolbar. You need to create a new object in the script. If you add the Animation object in the onload event function of the form object, then create the event function as follows.

this.form_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var aniObj = new nexacro.Animation("Ani00", this);
	this.addChild("Ani00", aniObj);
	this.Ani00.loop = true;
}

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

There are properties that allow you to specify in what format the animation effect will be processed. After creating the Animation object, you can specify the desired properties.

this.Ani00.loop = true;
this.Ani00.direction = "alternate";

You need to specify the target to which the animation effect will be applied. Use the addTarget method to specify which component to animate and which properties of that component to change. For example, you can change the size by changing the width property value while moving the component to the right by changing the left property value of the Button component.

this.Ani00.addTarget("AniItem00", this.Button00, "width:200, left:300");

When the addTarget method is executed normally, the AnimationItem object is added under the Animation object.

After specifying the form and target of the animation effect you want, run the animation effect. Use the play method to run the animation effect. If you have the loop setting, then you can use the stop method or the pause method to stop the animation effect.

this.Ani00.play();

Changing Size & Position

When executing the addTarget method, the items that can be entered as props parameters are all property values that can be used in the target component. In the example, we will only change the size and position.

Example

Apply animation effects to the Button00 and Button01 components. When the [play] button is clicked, the animation effect is executed, and when the [pause] button is clicked, the animation effect is paused. Click the [stop] button to return to the initial state.

sample_animation_01.xfdl

Core features used in the example

loop

Specifies whether the animation effect runs repeatedly. If you specify to change the position, you must set the value of the direction property to "alternate" for the repeated effect.

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', 'pause', and 'stop'.

Create the Animation object within the onload event function of the Form object and execute the addTarget method to specify the target component to which the animation effect is applied.

this.sample_animation_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var aniObj = new nexacro.Animation("Ani00", this);
	this.addChild("Ani00", aniObj);
	
	this.Ani00.loop = true;
	this.Ani00.direction = "alternate";
	
	this.Ani00.addTarget("AniItem00", this.Button00, "width:200, left:300");
	this.Ani00.addTarget("AniItem01", this.Button01, "width:50, left:200");	
};

Write the event function to process the function to control the animation effect when the top button is clicked.

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

this.btnPause__onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.pause();
};

this.btnStop__onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.stop();
};

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

Creating Number Counter Effect

Let us create the number counter effect described in the Animation object example.

Example

When the [play] button is clicked, the counter operates, and when the [init] button is clicked, it returns to the initial state. You can specify the maximum counter value in the Edit component.

sample_animation_02.xfdl

Core features used in the example

easing

Specifies the Interpolation (linear interpolation) property applied when processing animation effects. For example, the property value changes from 1 to 100, but you can adjust the speed instead of increasing the counter at the same speed. The default value is "easeoutelastic", but in the example, it was set to "linear" so that it can be processed at the same speed.

duration

Specifies the amount of time to process the animation effect. The default value is 1000 (1 second). If you set the duration property value too short, then the animation effect may not be noticeable to the user.

onrun

This is the event that occurs while processing the animation effect. It usually occurs 60 times per second but may vary depending on the environment in which it is running. Similar to the onupdate event, the onupdate event occurs even at the time specified by the delay property value, but the onrun event occurs only while the actual animation effect is running.

How to implement an example

Place the Edit component and the Button component on the screen. Set the text property value of the Button component placed at the top to "play" and "init". Place the Static component and set the background, font, and color properties. In the example, the background color is "indigo", the font color is "white", and the font size is 40.

Create the Animation object within the onload event function of the Form object and execute the addTarget method to specify the target component to which the animation effect is applied. Modify the easing property and duration property value of the Animation object. Add the onrun event to adjust the number displayed on the screen.

this.sample_animation_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
    var aniObj = new nexacro.Animation("Ani00", this);
    this.addChild("Ani00", aniObj);
    
    this.Ani00.easing = "linear";
	this.Ani00.duration = "5000";
	
    this.Ani00.addTarget("AniItem00", this.Static00, "text:100");
	this.Ani00.setEventHandler("onrun", this.Ani00_onrun, this);
};

The onrun event occurs while the animation effect is running. Since the value that occurs when changing number-related properties is not the integer, add the function that converts the value to the integer within the onrun event function.

this.Ani00_onrun = function(obj,e)
{
	this.Static00.text = nexacro.round(this.Static00.text);
};

Write the event function that starts the animation effect when the button is clicked and changes it to the initial value. If there is a value entered in the Edit component, reset the props value set in the AnimationItem object and execute the play method.

this.btnPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.Edit00.value > 0)
	{
		this.Ani00.items.AniItem00.props = "text:"+this.Edit00.value;
	}
    this.Ani00.play();
};

this.btnInit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Static00.text = 0;
};

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

Creating Easing Effect

When creating the component moving effect, if the easing property value is set to "linear", the animation effect is processed at the same speed from start to finish. However, it may not be natural to maintain the same speed depending on the situation. For example, if you are creating the effect of a car moving, the actual car would start slowly, speed up, reach a certain speed, and then slow down to stop again. To communicate with the user naturally, you need to be able to incorporate these changes in speed into your animation effects.

Example

Apply animation effects to the Button00, Button01, Button02, Button03 components. When the [play] button is clicked, the animation effect is executed, and when the [pause] button is clicked, the animation effect is paused. Clicking the [stop] button returns to the initial state. Selecting the Radio button at the bottom changes the easing property value and the text of the Button component.

sample_animation_03.xfdl

Core features used in the example

easing

Specifies the speed at which the animation effect is processed. Values that specify the value of the easing property can be divided into 3 types except for "linear". At the very beginning, the string "ease" is appended. After that, one of 3 strings, "In", "Out", "InOut", is appended. Combining two strings together creates the string "ease in", a term used in the traditional animation industry. It means that the object movement starts slowly and gets faster and faster. Conversely, "ease out" means to start fast and slow down gradually. It is sometimes expressed as "slow in" or "slow out". "ease in out" is like a car, gradually speeding up, getting the fastest in the middle point, and slowing down after the middle point. The string appended to the end specifies the point of the detailed change in speed.

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', 'pause', and 'stop'. Place the Static component long at the starting and ending points of the animation effect of the Button component, and set the background color with the background property. If you specify the value of the easing property with "easeInBack" or "easeInElastic", you can see that it goes out of the corresponding borders.

Place the radion component at the bottom of the screen and set innerdataset as shown below.

Note that the character string in the codecolumn item does not contain the blank character between the separator (,) and each property value. When changing the item, the value is converted into an array. If there is the blank character, then even blank characters can be recognized as an array value.

linear,easeInSine,easeOutSine,easeInoutSine
easeInOutSine,easeInOutQuad,easeInOutCubic,easeInOutQuart
easeInOutSine,easeInOutQuint,easeInOutExpo,easeInOutCirc
easeInOutSine,easeInOutBack,easeInOutElastic,easeInOutBounce

Since 4 easing property values have to be compared, create and use 4 Animation objects.

this.sample_animation_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.initAnimation("Ani00", "linear", this.Button00);
	this.initAnimation("Ani01", "easeInSine", this.Button01);
	this.initAnimation("Ani02", "easeOutSine", this.Button02);
	this.initAnimation("Ani03", "easeInOutSine", this.Button03);
};

Receive the Animation object id value, easing property value, and button object, and specify the state of the Animation object. When first executed, create the Animation object, and afterward, change only the easing property value and the text property of the Button component.

this.initAnimation = function(sId, sEasing, objButton)
{
    if(!this.all[sId])
	{
		var aniObj = new nexacro.Animation(sId, this);
		this.addChild(sId, aniObj);
		this.all[sId].addTarget("AniItem00", objButton, "left:300");		
		this.all[sId].direction = "alternate";		
		this.all[sId].duration = 3000;
		this.all[sId].direction = "alternate";
		this.all[sId].loop = true;	
	}
	this.all[sId].easing = sEasing;
	objButton.text = sEasing;
}

Write the event function to process the function to control the animation effect when the top button is clicked.

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

this.btnPause__onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.pause();
};

this.btnStop__onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.stop();
};

When the item is changed, the changed state is transmitted to the Animation object. Convert the value of the selected item into an array using the split method and transmit the created value to the initAnimation function.

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	var arr = e.postvalue.toString().split(",");
	this.initAnimation("Ani00", arr[0], this.Button00);
	this.initAnimation("Ani01", arr[1], this.Button01);
	this.initAnimation("Ani02", arr[2], this.Button02);
	this.initAnimation("Ani03", arr[3], this.Button03);
};

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

Processing Animation in Order

You can use the oncomplete event to check when the animation ends. Let us take a look at how to create two Animation objects and process them 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_animation_04.xfdl

Core features used in the example

oncomplete

This is the event that occurs after the time specified by the duration property value has elapsed. If the value of the loopcount property is not specified when the value of the loop property is true, then the oncomplete event does not occur because the animation does not stop. In the example, the loopcount property is set to 2 so that the first animation effect operates twice, and the next animation effect operates.

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 Animation object within the onload event function of the Form object and execute the addTarget method to specify the target component to which the animation effect is applied. For the first Animation object, set the loop, loopcount property values and add the oncomplete event.

this.sample_animation_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
    var aniObj00 = new nexacro.Animation("Ani00", this);
    this.addChild("Ani00", aniObj00);
    this.Ani00.addTarget("AniItem00", this.Button00, "left:300");
	this.Ani00.setEventHandler("oncomplete", this.Ani00_oncomplete, this);
	this.Ani00.loop = true;
	this.Ani00.loopcount = 2;
	
    var aniObj01 = new nexacro.Animation("Ani01", this);
    this.addChild("Ani01", aniObj01);
    this.Ani01.addTarget("AniItem00", this.Button01, "left:300");   
};

Write the event function to process the function to control the animation effect when the top button is clicked.

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

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

When the first animation effect is finished, execute the second animation play method.

this.Ani00_oncomplete = function(obj:nexacro.Animation,e:nexacro.AnimationEventInfo)
{
	this.Ani01.play();
};

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

Creating Expanding Menu Effect

When using the content screen widely, the menu area may be opened only when necessary. Apply the animation effect to create a gradually expanding and collapsing menu area.

Example

Click the button to expand the menu, and click the button again for the menu to gradually disappear.

sample_animation_05.xfdl

Core features used in the example

oncomplete

This is the event that occurs after the time specified by the duration property value has elapsed. If the value of the loopcount property is not specified when the value of the loop property is true, the oncomplete event does not occur because the animation does not stop. In the example, the loopcount property is set to 2 so that the first animation effect operates twice, and the next animation effect operates.

How to implement an example

Create the Animation object and register Target and event listener. Register the easing property value as "easeInSine" which shows a gentle change.

this.sample_animation_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
    var aniObj00 = new nexacro.Animation("Ani00", this);
    this.addChild("Ani00", aniObj00);
	this.Ani00.addTarget("AniItem00", this.btnPlay, "width:20, left:329");
	this.Ani00.addTarget("AniItem01", this.Div00, "width:300, left:30");
	this.Ani00.setEventHandler("oncomplete", this.Ani00_oncomplete, this);
	this.Ani00.easing = "easeInSine";

    var aniObj01 = new nexacro.Animation("Ani01", this);
    this.addChild("Ani01", aniObj01);
	this.Ani01.addTarget("AniItem00", this.btnPlay, "width:20, left:30");
	this.Ani01.addTarget("AniItem01", this.Div00, "width:1, left:30");
	this.Ani01.setEventHandler("oncomplete", this.Ani01_oncomplete, this);
	this.Ani01.easing = "easeInSine";
};

this.Ani00_oncomplete = function(obj:nexacro.Animation,e:nexacro.AnimationEventInfo)
{  
  this.btnPlay.text = "◀";
};

this.Ani01_oncomplete = function(obj:nexacro.Animation,e:nexacro.AnimationEventInfo)
{  
  this.btnPlay.text = "▶";
};

this.btnPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if( obj.text == "▶")
	{		
		this.Ani00.play();
	} else {
		this.Ani01.play();
	}
};