What is Animation?

Animation is a feature that enables you to "animate" an object as listed below. By using animation, you can emphasize specific objects or add motion to the screen.

Move horizontally or vertically, in pixel units
Scale up/down
Rotate clockwise/counter clockwise
Show/hide
Fill up/down or left/right
Fill center both side/center one side
Fill middle both side/middle one side

Specify the animation level for the movement or rotation of an object, or the origin point/start point of an object.

Note: Define various animation settings in the object properties ([Shape] tab ➞ [Size/Location] sub tab ➞ [Animation]).

Animation Level

Set the animation property range/value to animate the object.

Note: If an animation property range/value is changed directly, the property value/range will reset when the screen/content is changed.

Property	Function
[Horizontal Offset] [Vertical Offset]	Set the value to move the object in horizontal or vertical direction. In [Horizontal Offset], you can set the positive value to move the object from "left" to "right" direction and negative value to move the object from "right" to "left" direction. In [Vertical Offset], you can set the positive value to move the object from "up" to "down" direction and negative value to move the object from "down" to "up" direction.
[Horizontal Size (%)] [Vertical Size (%)]	Set the percentage of object after scaling up or down.
[Rotation Angle]	Set the rotation angle for the object.
[Visibility]	Set how to toggle visibility. Control object visibility for the following value. 0 Visible 1 Hidden 2 Collapsed (When using Dock Panel, Stack Panel or Uniform Grid, hides the object and fills the space of it.) For operations, see the following. Operation When Visibility Animation is Set Up Note: When the variable is boolean data type, you cannot use 2 (collapsed).
[Horizontal Fill] [Vertical Fill]	Set the percentage for the object's horizontal or vertical fill.

The animation level depends on the source properties.

(Example)

When you want to animate the object depending on a variable value, select [Variable].

Base Point/Start Point

Set the base and start point of the animated object.

Note: If the base or start point is changed directly, the base or start point will reset when the screen/content is changed.

Property

Function

[Horizontal Anchor]
[Vertical Anchor]

Set the origin point (X/Y axis) of the object that is scaled up/down.

On the object before any movement is applied, set its base point as a percentage from the top-left of the object.

When [Horizontal Anchor] = 25, and [Vertical Anchor] = 75, the base point is as shown below.

[Rotation Center (X)]

[Rotation Center (Y)]

Set the rotation center (X/Y axis) for the object.

On the object before any movement is applied, set the position of the base point as a percentage of the width and height of the object.

When [Rotation Center (X)] = 50, and [Rotation Center (Y)] = 500, the rotation center is as shown below.

Note: 0 is the left or top side of the object, and 100 is the right or bottom side of the object.

[Horizontal Start Point]

[Vertical Start Point]

Set the start point for the fill.

When [Center Both Side] is set, fill spreads to the left and right as shown below.

Note: When the value is 0, the object is not filled.