Animation Actions

From the Animation section of the list of actions available along the left column of the Action Editor, you can add any of the following six actions. Click an action for instructions on how to add it to an action sequence.

Action	Property
Flex Move	Moves the widget from its original position.
Flex Scale	Resizes a widget.
Flex Layout	Moves, scales, and rotates a widget with a single action along an X and Y axis (two dimensional).
Transform	Moves, scales, and rotates a widget with a single action along an X, Y, and Z axis (three dimensional).
Rotate	Rotates a widget along an X and Y axis (two dimensional).
Rotate 3D	Rotates a widget along an X, Y, and Z axis (three dimensional).
Set Style	Changes the background color of a widget.

 

Flex Move

To move a widget, do the following:

1. From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Visualizer Canvas, right-click it, and then select one of the action sequences, such as onTouchStart. Doing so opens the Action Editor and creates an action sequence for you to configure.
2. From the list of actions available along the left column of the Action Editor, scroll down, and then click Flex Move from the Animation section of available actions.
3. Update the properties with the following details, and then save your changes to the action sequence by pressing Ctrl+S:

Property	Description	Examples
Animation ID	The name or ID of the animation. You can use the default ID, or you can enter your own ID, ensuring that it has no spaces, and does not duplicate the name of an existing animation.	Move_left
Left	Specifies the distance a widget moves to the left from its original position.	-20 px, 100 dp, 15%
Right	Specifies the distance a widget moves to the right from its original position.	10 px, 175 dp, 25%
Top	Specifies the distance a widget moves to the top from its original position.	-15 px, 200 dp, 7%
Bottom	Specifies the distance a widget moves to the bottom from its original position.	23 px, 225dp, 6%
Center X	Specifies the distance a widget's center moves horizontally from its original position.	-21 px, 263 dp, 11%
Center Y	Specifies the distance a widget's center moves vertically from its original position.	-15 px, 200 dp, 7%
Time	Specifies the number of milliseconds (ms) in which an animation is completed.	1000
Time Function	The following time functions are available: Ease. Specifies a transition effect with a slow start, then fast, then end slowly. Linear. Specifies a transition effect with the same speed from start to end. Ease-In. Specifies a transition effect with a slow start. Ease-Out. Specifies a transition effect with a slow end. Ease-In-Out. Specifies a transition effect with a slow start and end.
Delay	Specifies the number of milliseconds (ms) to wait before starting an animation.	2000
Repeat	Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.	5
Direction	Specifies whether the direction of the animation goes in one direction or alternates. When the animation alternates, the animated widget moves toward the end position specified in the positional properties, and then returns to its starting point at the same rate. The following options are available: None. The animation moves from its starting point to the end position specified in the positional properties. Alternate. When the Repeat property is set to greater than 1, the animation action moves toward the end position specified in the positional properties during odd occurrences, and then returns back to the starting point during even occurrences.	None, Alternate
Start	Specifies how an animation action starts. The following options are available: Immediately. Start the animation immediately, with delay, if selected. With Animation. Action is run along with another action. After Animation. Action is run after completing another action. Note: With Animation and After Animation properties are ignored if only single action is available in the Action Sequence pane.	Immediately
Inherit	The following options are available: None. Upon completing this action, widget returns to its original size. Forward. Upon completing this action, widget stays at final position. Backward. Upon completing an action, widget will come return to the original position. Both. Applies Forward and Backward options.	Both

 

Note: For the following properties Left, Right, Top, Bottom, Center X and Center Y, you can specify the values in Device Independent Pixels (dp), pixels (px), and percentage (%). You can also specify negative values for these properties.

Flex Scale

To scale a widget, do the following:

1. From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Visualizer Canvas, right-click it, and then select one of the action sequences, such as onTouchStart. Doing so opens the Action Editor and creates an action sequence for you to configure.
2. From the list of actions available along the left column of the Action Editor, scroll down, and then click Scale from the Animation section of available actions.
3. Update the properties with the following details, and then save your changes to the action sequence by pressing Ctrl+S:

Property	Description	Examples
Animation ID	The name or ID of the animation. You can use the default ID, or you can enter your own ID, ensuring that it has no spaces, and does not duplicate the name of an existing animation.	Scale_widget
Width	Specifies the width of a widget.	100 px
Height	Specifies the height of a widget.	250 dp
Min Width	Specifies the minimum width of a widget.	20%
Min Height	Specifies the minimum height of a widget.	15%
Max Width	Specifies the maximum width of a widget.	540px
Max Height	Specifies the maximum width of a widget.	300px
Anchor X	Specifies the horizontal anchor point from where widget rotation begins.	15%
Anchor Y	Specifies the vertical anchor point from where widget rotation begins.	25%
Time	Specifies the number of milliseconds (ms) in which an animation is completed.	1000
Time Function	The following time functions are available: Ease. Specifies a transition effect with a slow start, then fast, then end slowly. Linear. Specifies a transition effect with the same speed from start to end. Ease-In. Specifies a transition effect with a slow start. Ease-Out. Specifies a transition effect with a slow end. Ease-In-Out. Specifies a transition effect with a slow start and end.
Delay	Specifies the number of milliseconds (ms) to wait before starting an animation.	2000
Repeat	Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.	5
Direction	Specifies whether the direction of the animation goes in one direction or alternates. When the animation alternates, the animated widget moves toward the end position specified in the positional properties, and then returns to its starting point at the same rate. The following options are available: None. The animation moves from its starting point to the end position specified in the positional properties. Alternate. When the Repeat property is set to greater than 1, the animation action moves toward the end position specified in the positional properties during odd occurrences, and then returns back to the starting point during even occurrences.	None, Alternate
Start	Specifies how an animation action starts. The following options are available: Immediately. Start the animation immediately, with delay, if selected. With Animation. Action is run along with another action. After Animation. Action is run after completing another action. Note: With Animation and After Animation properties are ignored if only a single action is available in the Action Sequence pane.	Immediately
Inherit	The following options are available: None. Upon completing this action, widget returns to its original size. Forward. Upon completing this action, widget stays at final position. Backward. Upon completing an action, widget will come return to the original position. Both. Apply Forward and Backward options.	Both

Note: For the following properties Width, Height, Min Width, Min Height, Max Width, Max Height, you can specify the values in Device Independent Pixels (dp), pixels (px), and percentage (%). You can also specify negative values for these properties.

Flex Layout

Using this single action, you can move, scale, and rotate a widget in two dimensions.

To use the Flex Layout animation, do the following:

1. From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Visualizer Canvas, right-click it, and then select one of the action sequences, such as onTouchStart. Doing so opens the Action Editor and creates an action sequence for you to configure.
2. From the list of actions available along the left column of the Action Editor, scroll down, and then click Flex Layout from the Animation section of available actions.
3. Update the properties with the following details, and then save your changes to the action sequence by pressing Ctrl+S:

Property	Description	Examples
Animation ID	The name or ID of the animation. You can use the default ID, or you can enter your own ID, ensuring that it has no spaces, and does not duplicate the name of an existing animation.	FlexLayoutAnimation
Left	Specifies by how much a widget moves to the left from its original position.	-20 px, 100 dp, 15%
Right	Specifies by how much a widget moves to the right from its original position.	10 px, 175 dp, 25%
Top	Specifies by how much a widget moves to the top from its original position.	-15 px, 200 dp, 7%
Bottom	Specifies by how much a widget moves to the bottom from its original position.	23 px, 225dp, 6%
Center X	Specifies by how much a widget's center moves horizontally from its original position.	-21 px, 263 dp, 11%
Center Y	Specifies by how much a widget's center moves vertically from its original position.	-21 px, 263 dp, 11%
Width	Specifies the width of a widget.	100 px
Height	Specifies the height of a widget.	250 dp
Min Width	Specifies the minimum width of a widget.	20%
Min Height	Specifies the minimum height of a widget.	15%
Max Width	Specifies the maximum width of a widget.	540px
Max Height	Specifies the maximum width of a widget.	300px
Rotate	Specifies the angle at which a widget is rotated.	45
Anchor X	Specifies the horizontal anchor point from where widget rotation begins.	15%
Anchor Y	Specifies the vertical anchor point from where widget rotation begins.	15%
Time	Specifies the number of milliseconds (ms) in which an animation is completed.	1000
Time Function	The following time functions are available: Ease. Specifies a transition effect with a slow start, then fast, then end slowly. Linear. Specifies a transition effect with the same speed from start to end. Ease-In. Specifies a transition effect with a slow start. Ease-Out. Specifies a transition effect with a slow end. Ease-In-Out. Specifies a transition effect with a slow start and end.
Delay	Specifies the number of milliseconds (ms) to wait before starting an animation.	2000
Repeat	Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.	5
Direction	Specifies whether the direction of the animation goes in one direction or alternates. When the animation alternates, the animated widget moves toward the end position specified in the positional properties, and then returns to its starting point at the same rate. The following options are available: None. The animation moves from its starting point to the end position specified in the positional properties. Alternate. When the Repeat property is set to greater than 1, the animation action moves toward the end position specified in the positional properties during odd occurrences, and then returns back to the starting point during even occurrences.	None, Alternate
Start	Specifies how an animation action starts. The following options are available: Immediately. Start the animation immediately, with delay, if selected. With Animation. Action is run along with another action. After Animation. Action is run after completing another action. Note: With Animation and After Animation properties are ignored if only single action is available in the Action Sequence pane.	Immediately
Inherit	The following options are available: None. Upon completing this action, widget returns to its original size. Forward. Upon completing this action, widget stays at final position. Backward. Upon completing an action, widget will come return to the original position. Both. Apply Forward and Backward options.	Both

Note: For the following properties Left, Right, Top, Bottom, Center X and Center Y, Width, Height, Min Width, Min Height, Max Width, and Max Height, you can specify the values in Device Independent Pixels (dp), pixels (px), and percentage (%). You can also specify negative values for these properties.

Transform

Using this single action, you can move, scale, and rotate a widget in three dimensions.

To use the Flex Layout animation, do the following:

1. From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Visualizer Canvas, right-click it, and then select one of the action sequences, such as onTouchStart. Doing so opens the Action Editor and creates an action sequence for you to configure.
2. From the list of actions available along the left column of the Action Editor, scroll down, and then click Flex Layout from the Animation section of available actions.
3. Update the properties with the following details, and then save your changes to the action sequence by pressing Ctrl+S:

Property	Description	Examples
Animation ID	The name or ID of the animation. You can use the default ID, or you can enter your own ID, ensuring that it has no spaces, and does not duplicate the name of an existing animation.	TransformAnimation
Left	Specifies by how much a widget moves to the left from its original position.	-20 px, 100 dp, 15%
Top	Specifies by how much a widget moves to the top from its original position.	-15 px, 200 dp, 7%
Width	Specifies the width of a widget.	100 px
Height	Specifies the height of a widget.	250 dp
Rotate	Specifies the angle at which a widget is rotated. This can range between 180 and -180.	45
Anchor X	Specifies the horizontal anchor point from where widget rotation begins.	15%
Anchor Y	Specifies the vertical anchor point from where widget rotation begins.	15%
Time	Specifies the number of milliseconds (ms) in which an animation is completed.	1000
Delay	Specifies the number of milliseconds (ms) to wait before starting an animation.	2000
Repeat	Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.	5
Direction	Specifies whether the direction of the animation goes in one direction or alternates. When the animation alternates, the animated widget moves toward the end position specified in the positional properties, and then returns to its starting point at the same rate. The following options are available: None. The animation moves from its starting point to the end position specified in the positional properties. Alternate. When the Repeat property is set to greater than 1, the animation action moves toward the end position specified in the positional properties during odd occurrences, and then returns back to the starting point during even occurrences.	None, Alternate
Fill Mode	Defines the appearance of the animated widget after the animation has executed, outside of the time the animation takes place. The following options are available: Forward. Causes the animated widget to carry forward, after the animation, the properties it had when the animation ended. Backward. Causes the animated widget to go back, after the animation, to the properties it had when the animation ended. Both. Causes the animated widget to carry forward, after the animation, the properties it had when the animation ended, except for whatever property or properties are key-framed to revert back after the animation, as defined in additional code.	-21 px, 263 dp, 11%

Note: For the following properties Left, Top, Width, and Height, you can specify the values in Device Independent Pixels (dp), pixels (px), and percentage (%). You can also specify negative values for these properties.

Rotate

To rotate a widget, do the following:

1. From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Visualizer Canvas, right-click it, and then select one of the action sequences, such as onTouchStart. Doing so opens the Action Editor and creates an action sequence for you to configure.
2. From the list of actions available along the left column of the Action Editor, scroll down, and then click Rotate from the Animation section of available actions.
3. Update the properties with the following details, and then save your changes to the action sequence by pressing Ctrl+S:

Property	Description	Examples
Animation ID	The name or ID of the animation. You can use the default ID, or you can enter your own ID, ensuring that it has no spaces, and does not duplicate the name of an existing animation.	Rotate_angle
Rotate	Specifies the angle at which a widget is to be rotated.	45
Anchor X	Specifies the horizontal anchor point from where widget rotation begins.	15%
Anchor Y	Specifies the vertical anchor point from where widget rotation begins.	15%
Time	Specifies the number of milliseconds (ms) in which an animation is completed.	1000
Time Function	The following time functions are available: Ease. Specifies a transition effect with a slow start, then fast, then end slowly. Linear. Specifies a transition effect with the same speed from start to end. Ease-In. Specifies a transition effect with a slow start. Ease-Out. Specifies a transition effect with a slow end. Ease-In-Out. Specifies a transition effect with a slow start and end.
Delay	Specifies the number of milliseconds (ms) to wait before starting an animation.	2000
Repeat	Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.	5
Direction	Specifies whether the direction of the animation goes in one direction or alternates. When the animation alternates, the animated widget moves toward the end position specified in the positional properties, and then returns to its starting point at the same rate. The following options are available: None. The animation moves from its starting point to the end position specified in the positional properties. Alternate. When the Repeat property is set to greater than 1, the animation action moves toward the end position specified in the positional properties during odd occurrences, and then returns back to the starting point during even occurrences.	None, Alternate
Start	Specifies how an animation action starts. The following options are available: Immediately. Start the animation immediately, with delay, if selected. With Animation. Action is run along with another action. After Animation. Action is run after completing another action. Note: With Animation and After Animation properties are ignored if only single action is available in the Action Sequence pane.	Immediately
Inherit	The following options are available: None. Upon completing this action, widget returns to its original size. Forward. Upon completing this action, widget stays at final position. Backward. Upon completing an action, widget will come return to the original position. Both. Apply Forward and Backward options.	Both

Rotate 3D

To rotate a widget along the X, Y, and Z axes, do the following:

1. From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Visualizer Canvas, right-click it, and then select one of the action sequences, such as onTouchStart. Doing so opens the Action Editor and creates an action sequence for you to configure.
2. From the list of actions available along the left column of the Action Editor, scroll down, and then click Rotate 3D from the Animation section of available actions.
3. Update the properties with the following details, and then save your changes to the action sequence by pressing Ctrl+S:

Property	Description	Examples
Animation ID	The name or ID of the animation. You can use the default ID, or you can enter your own ID, ensuring that it has no spaces, and does not duplicate the name of an existing animation.	Rotate3D_angle
Rotate 3D	Specifies which axes rotate, and the angle of their rotation. For each axis—X, Y, and Z—you specify either 0, which means you don't want that axis to rotate, or 1, which means you do want it to rotate. You also specify the number of degrees by which the widget should rotate upon the chosen axes.
Perspective	Sets the perspective transform and the vanishing point to center of the widget; this can be platform-specific. Perspective creates the illusion of distance between the user and the object.	1000
Anchor X	Specifies the horizontal anchor point from where widget rotation begins.	15%
Anchor Y	Specifies the vertical anchor point from where widget rotation begins.	15%
Time	Specifies the number of milliseconds (ms) in which an animation is completed.	1000
Time Function	The following time functions are available: Ease. Specifies a transition effect with a slow start, then fast, then end slowly. Linear. Specifies a transition effect with the same speed from start to end. Ease-In. Specifies a transition effect with a slow start. Ease-Out. Specifies a transition effect with a slow end. Ease-In-Out. Specifies a transition effect with a slow start and end.
Delay	Specifies the number of milliseconds (ms) to wait before starting an animation.	2000
Repeat	Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.	5
Direction	Specifies whether the direction of the animation goes in one direction or alternates. When the animation alternates, the animated widget moves toward the end position specified in the positional properties, and then returns to its starting point at the same rate. The following options are available: None. The animation moves from its starting point to the end position specified in the positional properties. Alternate. When the Repeat property is set to greater than 1, the animation action moves toward the end position specified in the positional properties during odd occurrences, and then returns back to the starting point during even occurrences.	None, Alternate
Inherit	The following options are available: None. Upon completing the action, the widget returns to its original position. Forward. Upon completing the action, the widget stays at its final position. Backward. Upon completing the action, the widget animates backwards back to its original position. Both. The Forward and Backward options are both implemented.	Both

Set Style

The Set Style animation changes the background color of a widget.

To change the background color of a widget, do the following:

1. From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Visualizer Canvas, right-click it, and then select one of the action sequences, such as onTouchStart. Doing so opens the Action Editor and creates an action sequence for you to configure.
2. From the list of actions available along the left column of the Action Editor, scroll down, and then click Set Style from the Animation section of available actions.
3. Update the properties with the following details, and then save your changes to the action sequence by pressing Ctrl+S:

Property	Description	Examples
Animation ID	The name or ID of the animation. You can use the default ID, or you can enter your own ID, ensuring that it has no spaces, and does not duplicate the name of an existing animation.	SetStyle_Color
Background Color	Select a color from the color picker. Only Single color .
Opacity	Specifies the opacity of the background color.	15%
Time	Specifies the number of milliseconds (ms) in which an animation is completed.	1000
Time Function	The following time functions are available: Ease. Specifies a transition effect with a slow start, then fast, then end slowly. Linear. Specifies a transition effect with the same speed from start to end. Ease-In. Specifies a transition effect with a slow start. Ease-Out. Specifies a transition effect with a slow end. Ease-In-Out. Specifies a transition effect with a slow start and end.
Delay	Specifies the number of milliseconds (ms) to wait before starting an animation.	2000
Repeat	Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.	5
Direction	Specifies whether the direction of the animation goes in one direction or alternates. When the animation alternates, the animated widget moves toward the end position specified in the positional properties, and then returns to its starting point at the same rate. The following options are available: None. The animation moves from its starting point to the end position specified in the positional properties. Alternate. When the Repeat property is set to greater than 1, the animation action moves toward the end position specified in the positional properties during odd occurrences, and then returns back to the starting point during even occurrences.	None, Alternate
Start	Specifies how an animation action starts. The following options are available: Immediately. Start the animation immediately, with delay, if selected. With Animation. Action is run along with another action. After Animation. Action is run after completing another action. Note: With Animation and After Animation properties are ignored if only single action is available in the Action Sequence pane.	Immediately
Inherit	The following options are available: None. Upon completing this action, widget returns to its original size. Forward. Upon completing this action, widget stays at final position. Backward. Upon completing an action, widget will come return to the original position. Both. Apply Forward and Backward options.	Both

 

 

 

 

Rev	Author	Edits
7.0	SB	NMK

Copyright © 2013 Kony, Inc. All rights reserved.