The “move item” animation action allows you to move a UI element on the screen. There are three methods for moving items.
Move to (x,y) coordinates
Using this method you can move an item to an exact location of x and y coordinates. There is no maximum or minimum values for x and y as you are allowed to move the item off-screen boundaries. You can also set negative values for x and y. The top-left position of x and y in your screen is 0,0.
Move by (x,y)
This method allows you to move an item right, left, up or down by defining the number of pixels you want to move the item. You can use negative values for x to move the item left and positive to move the item right. Negative numbers for y moves the item up and positive down. You can use the * value for x or y if you don’t want to change the value of x or y accordingly.
Move to animation target
Move to animation target allows you to move an item to a target that has been previously set on the canvas using the “Animation Target” component found in the basic components of any component library. The top-left corner of the item to animate will move to the top-left corner of the animation target.
The “scale item” animation action allows you to scale a UI item by defining the x and y factor for scaling. The x and y factor can range from 0 to any number. Number 0-1 will scale the item down (make it smaller) whereas number greater than 1 will scale the item up (make it larger). The item position when scaling remains centered based on the center point of the item.
Besides scaling, there are two ways to resize an item by changing its width and height.
Resize to (width,height) dimensions
This action will allow you to set the new width and height that your item will have after the animation is complete.
Resize (width,height) dimensions by (x,y)
This action when triggered will increase or decrease the width/height of your item by x and y pixels accordingly. Negative values denote decrease and positive values denote increase in width/height.
The “fade item” action allows you to change the opacity of an item. Possible values are 0 to 1. For example, decimal number 0.5 represents 50% opacity.
There are two rotate animation actions available.
Rotate to (x) degree rotation
This action allows you to rotate an item to the degrees set. Values may range from -360 to 360. Negative values will rotate the item counter-clockwise and positive values will rotate the item clockwise.
Rotate by (x) degrees
This action will rotate the item by x degrees. Each time the same action is fired then the item rotates x degrees. Possible values are any integer number negative or positive. Every 360 degrees the item rotates a full circle, i.e. rotate by 720 degrees will rotate the item two times.