Animation
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:
- From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Iris 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.
- 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.
- 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:
- From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Iris 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.
- 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.
- 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:
- From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Iris 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.
- 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.
- 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:
- From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Iris 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.
- 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.
- 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:
- From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Iris 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.
- 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.
- 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:
- From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Iris 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.
- 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.
- 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:
- From the Project tab of the Project Explorer, select the widget you want to apply the action to. Once it’s highlighted on the Iris 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.
- 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.
- 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 |