The animation function means the function to give the animation effect to the screen elements which compose the XLATFORM screen. The screen elements to give the animation effect are Visual components, screen Form, Frame, Widget, etc.

Overview of the Animation Function

The animation function at XPLATFORM means that the UI elements shown on the screen are changed dramatically like the button is rotated or moved.

There are four types of this Animation in large: Transition Animation, Property Animation, Move Animation and Composite Animation. Composition Animation means the combination of Transition and Property Animation.

Four Elements of the Animation Function

In order to use the Animation function, the following four elements are required:

• What : determines what screen elements the Animation effect is given to.

• How : determines which Animation effect is given.

• How much : determines how long and how fast the determined Animation effect is executed. Interpolation means the counting formula which represents the long and short of the time change at Animation. Therefore, it could be closer to "how" rather than "how much" but it is classified to "how much" because the time concept is involved.

• When : determines when the Animation effect is started.

Simple Animation Function Implementation

When the four elements of the Animation function are combined, it can be regarded to be operated.

Here, the example of the Animation effect which rotates the image is simply described.

The description is presented with the assumption that the project and form generation process are already completed. The most example screens are the UX-Studio screens.

The 1st Stage (what): Select the rotating target. Or select Animation Target.
Here, the ImageViewer component which shows TOBESOFT Logo is selected.

The following is the screen executed by Quick View at UX-Studio:

The 2nd Stage (how): Select the Animation type by generating Animation Object.
Here, since the effect to rotate "TOBESOFT Logo" is selected, Transition Animation Object which has the function of the rotating effect is generated.

The 3rd Stage (how): Select the detailed value of Animation Object.
Here connect Animation Target and the Animation effect.

The overview about the setting value of Animation Object is described as follows:

The 4th Stage (how much): Determine to which time change the Animation effect is operated.

The interpolation value is designated to "Interpolation.circln)". "circln" shows the effect which moves slowly at first but faster gradually.

With the Animation Editor of UX-Studio, the Animation effect can be more conveniently defined. By double clicking Animation Object, Animation Editor about the applicable Animation Object is shown up.

As the above screen, Animation Editor can show the interpolation effect with the graphic form.

The left side graph shows the value is increasing rapidly as time goes by. Or it moves slowly but around at the end, it moves faster.

The 5th Stage (when): Designate Animation Trigger
Now the input for the information about Animation is completed and the operation switch is needed to be made. Here, by clicking "rotation start" button, let’s start to operate.

The following coding is added to the click event of "rotation start".

function Button00_onclick(obj:Button, e:ClickEventInfo)
{
	TransitionAnimation00.beginTransition();
	TransitionAnimation00.endTransition();
	TransitionAnimation00.run();
}

Like this, the Trigger which starts Animation by calling run() on the script is called as the manual Trigger.

The following is the look that "TOBESOFT" logo image rotates when the "rotation start" button is clicked after the execution of Quick View at UX-Studio.

When the "rotation start" button is rotated, it will be known that it moves slowly at first but moves faster around at the end.

Animation Application Target

The target for the Animation application is applied not only to the simple component but also to the various screen elements. The following is the table which represents the applicable targets.

The following is the target that is available to the Animation application.

Understanding about Animation

Previously, the overview of Animation and instructions are mentioned in brief. But in order to use the practical Animation function without a problem, more parts should be understood. Here the prior knowledge is described in order to implement the in-depth Animation function.

Definition of Term, Animation

• Animation Trigger

  It means the event that occurrs the start of Animation. In Animation Trigger, there are the manual Trigger and the automatic Trigger.

  The manual Trigger means to trigger with the direct coding at the script. The calling of run() used at "Chapter 5.1.2." belongs to this.

  The automatic Trigger means the Trigger which occurs automatically during the screen execution. The directions for the automatic Trigger will be dealt at "Chapter 5.4.1"in detail.

• Animation Interpolation

  Interpolation is a counting formula to show the long and short of the process speed of the Animation effect. Since interpolation is a counting formula, the developer can register directly but the interpolation provided by XPLATFORM is better to use.

  XPLATFORM provides around 30 interpolations.

• The Time and Value of Animation

The relationship between Time and Value will be described with the example.

First of all, Time and Value is assumed to be set as follows:

StartTime=1000, Duration=5000, FromValue=20, ToValue=1

When the values are set as above, the result of the execution can be predicted as follows:

• Animation is executed after 1 second (1000 milli-second) from the Trigger occurring time. Trigger can use the automatic Trigger or the manual Trigger that uses run() Method.

• The value at the starting time of the Animation execution is 20.

• From the Animation execution, after 5 seconds, the Animation is finished.

• The value after the Animation finish is 1. If EndingMode is From, the Value returns back to 20 after the Animation finish.

• For 5 seconds during the Animation is executed, the value is changed 1 from 20. The value is usually reduced by 4 per one second. If the value of EndingMode is set to From, the value after the Animation execution is finished returns to 20 even though the Value becomes 1.

Animation Interpolation

Interpolation is a counting formula which shows the long and short of the process speed of the Animation effect. Since interpolation is a counting formula, the developer can register directly but using the interpolation provided by XPLATFORM is better. XPLATFORM provides around 30 interpolations.

The following is the Animation Editor screen at UX-Studio:

Several interpolations are described with Graphs. With these descriptions, the characteristics of the remaining interpolations can be known immediately just by their graphs.

Besides, many other interpolations are provided. For all of the interpolations, the graphs are provided and with these graphs, their characteristics are understood.

Transition Animation

Transition Animation means the Animation effect used at the image conversion. It is very similar to the effect that passes from the screen A to the screen B on TV. Or when the TV screen is converted, the effect to convert a scene to another with the effect to rotate the scene or to make it cloud.

The core word in Transition Animation might be "conversion". Therefore, the most important thing in this effect is "the image before conversion" and "the image after conversion".

As graphically shown, it is as follows:

The conversing effects are as follows:

Saving and Execution of the Image before/after Conversion

The core to implement Transition Animation is to know how to save the two images before and after the conversion. The method is very simple.

The image before conversion is the present image. The image after conversion is the contents of the implementation between the beginTransition() function and 와 endTransition()function.

If it is schematic, it is as follows:

Example of Transition Animation

Here, the conversed screen from one image to another one by using ImageViewer component is made as an example. For the conversion effect, the 3-dimensional Cube rotation will be used.

The 1st Stage: Select Animation Target.
Connect image to ImageViewer, and prepare to Animation Trigger with one button.

The 2nd Stage (how): Generate Transition Animation Object.
After clicking TransitionAnimation at MenuBar, click at the Invisible Object area and then Transition Animation Object is generated. At the same with this generation, the screen is open which can define the nature of Transition Animation at Property area.

The 3rd Stage (how): Set up the detailed value of Animation Object.
Here, connect Animation Target and the Animation effect.

The overview of the setting value for Animation Object is as follows:

The 4th Stage (when): Designate Animation Trigger
Now the input of all the information about Animation is completed and then only the operation switch should be made. Here by clicking "Animation Start" button, the operation should be started.

The following coding is added to the click event of "Animation Start" button:

var imageFlag = 0;
function Button00_onclick(obj:Button, e:ClickEventInfo)
{
	TransitionAnimation00.beginTransition();
	if (imageFlag == 0)
	{
		ImageViewer00.image = "URL('Image3')";
		imageFlag = 1;
	}
	else
	{
		ImageViewer00.image = "URL('Image2')";
		imageFlag = 0;
	}
	TransitionAnimation00.endTransition();
	TransitionAnimation00.run();
}

With this coding, whenever the button is clicked, the imageFlag value is toggled to 010 and changes the ImageViewer00.image value continuously. Then, whenever it is clicked, the 3d cube Animation function is operated and the two images are changed continuously.

The following is the look of the image rotation when the "Animation Start" button is clicked after Quick View is executed at UX-Studio:

Property of Transition Animation

The following is the Property list of Transition Animation. Refer to the XPLATFORM Reference Guide for more details:

Method of Transition Animation

The following is the method list for Transition Animation. Refer to the XPLATFORM Reference Guide for the more details:

Property Animation

Property Animation means to have the Animation effect by changing in order the property value of the Animation Target. If Property Animation is applied to the property values of the x and y coordinates, the effect which moves the applicable Animation Target can have been taken

Here, the attentive point is that the property value to be applied to Animation has the features to have the start value, middle value and end value. Or, like Text or Boolean Type, the property with ambiguous concept about start, middle and end can’t be the target to

Difference between Transition Animation and Property Animation

Transition Animation gives the effect to trade the two images at the state where they are saved.

Property Animation use only one image not the two images. It gives the animation effect by reflecting the changes of the property value for the target to the screen in real time.

The attentive point is that Transition Animation and Property Animation are not the contradictory concepts. These two Animations provide the Animation effect from the different point of view. For example, when some images are wanted to rotate, Transition Animation is used and when they are wanted to move, Property Animation is used. When the images are wanted to rotate and to move, Composite Animation which is the combination of these two is used.

Example of Property Animation

Here, with two buttons and one shape, the example for Property Animation is prepared.

This example has the following functions:

• When the mouse is on the buttons, the length of the button is increased.

• When the mouse on the buttons moves to others, the length of the button returns to the original length.

• When the upper button is clicked, the effect that the look with the oval form on the right is fallen occurs.

• When the lower button is clicked, the look with the oval form on the right returns to its previous place.

For the preparation of this example, the followings must be considered:

• Animation Targets are three:

  two button components and one shape component

• Six Property Animation Objects are required in total:

  Two Animations about the effect that the length of two button components is increased

  Two Animations about the effect that the length of two button components is decreased

  One Animation about the effect that the shape falls

  One Animation about the effect that the shape returns back to its original place

• But, the practical Animation Objects are used only three.

  One Animation about the effect that the length of the button components is increased or decreased

  One Animation about the effect that the shape falls shape

  One Animation about the effect that the shape returns back to its original place

  Or one Animation Object can be used for several Animation Targets.

The 1st Stage: Select Animation Target.
Prepare two button components and one shape component.

The 2nd State (how): Generate Property Animation Object.
Generate two Property Animation Objects. Among the total three, make two static and generate the last one active.

• PropertyAnimation00 is used to adjust the length of the button.

• PropertyAnimation01 is used for Shape with a ball shape to fall down like a ball.

• PropertyAnimation02 is used for Shape with a ball shape to return to its original place and at the 5th stage, generate actively.

The 3rd Stage (when/how): Coding Event for two buttons.
Here, when the mouse is on the two buttons, implement the effect the length of the buttons are increased. Drag the two button components at the same time and make them a group. Register onmouseenter and onmouseleave events.

When the components are selected and the events are registered as above, the event generated from the selected components can be handled at the event function.

The coding of the event function is registered as follows:

// *******************************************************************
// When the mouse is on the applicable component, by using Property Animation 
// increase the width of the applicable component. 
// *******************************************************************
function Button_onmouseenter(obj:Button, e:MouseEventInfo)
{
	PropertyAnimation00.targetcomp = obj.name
	PropertyAnimation00.tovalue = 150;
	PropertyAnimation00.run();
}

// *******************************************************************
// When the mouse is out of the applicable component, by using Property Animation 
// decrease the width of the applicable component.
// *******************************************************************
function Button_onmouseleave(obj:Button, e:MouseEventInfo)
{
	PropertyAnimation00.targetcomp = obj.name;
	PropertyAnimation00.tovalue = 100;
	PropertyAnimation00.run();
}

The 4th Stage (when): Connect the effect that the ball is falling when the button is clicked. 
In case that Button00 is clicked with PropertyAnimation01 at clickeffect Property which is Event trigger Property, make PropertyAnimation01 operated.

Here, in order to show the various examples for the use, the general event is handled even though Button01 (which makes the ball returned to its original place) is also used for Event trigger Property. Refer to the 5th stage for the more detailed example.

The 5th Stage (when/how): Code to connect Animation and to execute for the ball to return to its original place when the button is clicked. 
Here, in order to show the various examples for the use, the general event is handled even though Button01 (which makes the ball returned to its original place) is also used for Event trigger Property.

First of all, connect onclick event of Button01 to the event function.

Register the coding of the event function as follows:

// *******************************************************************
// When Button01 is clicked, generate Property Animation Object actively and
// after setting at the applicable Animation Object in detail, make it operated.
// The ball which moved to the other place by PropertyAnimation01
// code it to return to its original place. 
// *******************************************************************
function Button01_onclick(obj:Button, e:ClickEventInfo)
{
	PropertyAnimation02 = new PropertyAnimation();// Generation of Property Animation
	PropertyAnimation02.duration = 500; // Operation for 0.5
	PropertyAnimation02.interpolation = Interpolation.linear; // linear effect.
	PropertyAnimation02.targetcomp = Shape00; // Making Animation Target to the shape of ball 
	PropertyAnimation02.targetprop = "position.y"; // move along the y axis

	PropertyAnimation02.endingmode = "to";
	PropertyAnimation02.starttime = 0;
	PropertyAnimation02.tovalue = 30; // If the value of y-axis is 30, it is the original place.
	PropertyAnimation02.run(); // Execution of Animation 
}

The following is the screen after the execution of Quick View at UX-Studio.

Here, when the mouse is on the button, the length of the button is increased and when it is out of the button, the length of the button returns to the original size.

The execution screen is as follows:

Here, when the button of "fall" is clicked, the red ball on the right is fallen below.

The execution screen is as follows:

Next, when the button of "the original place" is clicked, the red ball on the right returns to its original place.

The execution screen is as follows:

Property of Property Animation

The following is the Property list for Property Animation. For the details, refer to XPLATFORM Reference Guide.

Method of Property Animation

The following is the method list for Property Animation. For the details, refer to XPLATFORM Reference Guide.

Composite Animation

Composite Animation is the form combined Property Animations and Transition Animations. Therefore, the similar effect can be obtained by executing Property Animation or Transition Animation separately. But when these are executed separately, Trigger can be obtained at the same time and there becomes the minute difference of the start time gradually. Accordingly the complicated effect of Animation can’t be synchronized.

The following figure is schematic of registering four Animations to one Composite Animation:

In case that the Composite Animation in the above figure is executed, 4 Animations are operated and the followings can be predicted:

• After Transition Animation1 is finished, Transition Animation 2 is started.

• Property Animation1, Property Animation2 and Transition Animation 1 are started at the same time.

• After Property Animation1 is finished, Property Animation2 is executed for 1 second continuously.

• Composite Animation is operated for 2 seconds after its start.

Example of Composite Animation

Here, the example of Composite Animation where the cannon is explored when it is shot and fallen to the target is prepared.

This example has the following functions:

• When the launch button is clicked, the cannon shoots at the shell.

• The shell flies for 3 seconds with the trajectory curve and falls down to the target.

• When the shell falls down to the target, it explores.

The 1st Stage: Select Animation Target.
Draw a cannon and shell with one button component and shape components. 
Draw the floor and exploration look with the GraphicPath components.

In the above figure, the components indicated with red explanation box are the components connected with Animation. Here, all the screen elements are composed with GraphicPath or Shape components not the images but if necessary, it is all right to handle with the images.

The 2nd Stage (how): Generate Composite Animation Object.
Generate one Composite Animation Object.

Composite Animation is difficult to edit without Animation Editor. Therefore, after generating Composite Animation, open Animation Editor.

The 3rd Stage (how): Register several Animations to Composite Animation Object.
Here, five Animations were registered.

When the "+"button is registered, only one between "Transition Animation" and "Property Animation" must be selected. Here, register two Transition Animations and three Property Animations.

The 4th Stage (how): Input the detailed information about the five registered Animations.
Here, five Animations were registered.
The following figure is the screen of Animation Editor.

Composite Animation doesn’t set any values except id. Because the property value for Composite Animation doesn’t influence to the Animation effect and it is the default value which is used when the property value for the registered Animation is not set. Therefore, here setting the Composite Animation Property value is not necessary.

The property value for the five registered Animations is as follows:

1. The setting value for TransitionAnimation00 (rotating shells)

   When the shell flies, it gives the effect to turn one full circle.

2. The setting value for PropertyAnimation00 (movement of x-axial of the shell)

   Move the shell to 400 pixels from the x-axial value. By this, the shell moves for 3seconds from left to right.

3. The setting value for PropertyAnimation01 (movement of y-axial of the shell –climb up)

   Move the shell to -150 pixels from the y-axial value. By this, the shell climbs up to the top point for 1.5 seconds.

4. The setting value for PropertyAnimation02 (movement of y-axial of the shell – fall down to the bottom)

   Move the shell to 150 pixels from the y-axial value. By this, the shell falls down from the top point to the lowest point for 1.5 seconds.

5. The setting value for TransitionAnimation01 (shows the exploring look)

   It shows the fade effect by changing the state of GraphicPath01 component which is the exploring look from visible=false to visible=true.

The 5th Stage (when): Launch the cannon by clicking the launch button. 
Input as follows to the onclick event function of the launch button:

function Button00_onclick(obj:Button, e:ClickEventInfo)
{
	Shape00.position.x = 59; // movement of the shell to the launch position
	Shape00.position.y = 196; // movement of the shell to the launch position
	Shape00.visible = true; // make the shell seen
	CompositeAnimation00.run(); // launch the shell
}

The following is the screen after Quick View is executed at UX-Studio:

Property of Composite Animation

The following is the property list for Composite Animation: For the details, refer to XPLATFORM Reference Guide.

Method of Composite Animation

The following is the method list for Composite Animation. For the details, refer to XPLATFORM Reference Guide.

Use of the Improved Animation Function

The Animation function can be used with a variety and complexity depending on its application method. Here, several additional methods to use are described.

Use of the Automatic Trigger

To start Animation manually by calling run () at script is called as the manual Trigger. The automatic Trigger doesn’t do this kind of script coding but starts Animation automatically.

The following is the list of the automatic Triggers:

Here, among these triggers, MouseEnter is described as an example. MouseEnter Trigger occurs when the Mouse enters the area of the specific component.

The 1st Stage (how): Select the Animation kinds by generating Animation Object.
The selection method of Animation kind is the same as that of the 2nd stage at "Example of Transition Animation". The manual Trigger generates Animation Target first but the automatic Trigger generates Animation Object first.

As the figure below, the automatic Trigger must generate Animation Object first, differently from the manual Trigger because in the automatic Trigger, Animation Target must have the information about Animation Object.

Details are explained step by step.

The following is the example for the generation:

The 1st Stage (how /how much): Generate Animation Object and set the detailed value.

The reason not to set the targetcomp value is that Animation Target which will be applied to the Animation effect is not decided.

The 2nd Stage (what): Select the rotation target and determine in which case it will be rotated. 
Connect Animation Object in order to be rotated when the mouse enters the area of ImageViewer00 component which shows "TOBESOFT" logo.

As in the above figure, it is known that TransitionAnimation00 is connected to the effect property value of ImageViewer00 which is Animation Target.

User Interpolation Making

Developers can develop an interpolation in addition to Interpolations provided by XPLATFORM. It is done simply by registering at interpolation Property after preparing the interpolation function.

The following is the form of the interpolation function:

function useInterpolation(info)
{
	var d = info.duration;
	var t = info.progresstime;
	info.progressvalue = t/d;
}

• Input the function name freely.

• Info object which is the argument of the function has 3 properties.

• The calculated result value is allocated to info.progressvalue.

  Therefore, the formula used here has the same effect as that of “Interpolation.linear”.

User Interpolation developed by the developer can be registered at the applicable Animation의 Interpolation. The following is the screen which inputs User Interpolation at the Animation Property window:

It is connected just by inputting the function name.

Now, the Animation effect can be changed by using Interpolation. The following screen is the one which sets Animation which moves from left to right when the button is clicked. Here, Animation Trigger is not mentioned.

The main setting value for Property Animation Object is as follows:

When the button is clicked to execute this example, it moves once from left to right. By making this movement for round trip twice, in the end it will come to its original place.

In this case, the interpolation for the double round trips is not provided by XPLATFORM. The interpolation function is defined as follows:

function useInterpolation(info)
{
	var d = info.duration;
	var t = info.progresstime;
	var kk = 4*t/d;
	if (kk<1)
		info.progressvalue = kk; // It makes increased from 0 to 1 between 0 and 1 second. 
	else if (kk<2)
		info.progressvalue = 2-kk; // It makes decreased from 1 to 0 between 1 and 2 seconds.
	else if (kk<3)
		info.progressvalue = kk-2; // It makes increased from 0 to 1 between 2 and 3 seconds. 
	else
		info.progressvalue = 4-kk; // It makes decreased from 1 to 0 between 3 and 4 seconds. 
}

This function makes info.progressvalue changed to "0>1>0>1>0". When this function is applied to the interpolation property for the above Property Animation, the button moves twice for the round trip for four seconds.

Other Application for Animation

Additionally, Animation can be applied to Frame, Form, and Widget.

Here, only the application method for Animation is described.

• The application method for Frame Animation

• The application method for Form Animation