Quant-UX supports two kinds of animations. Widget animations change the style of a widget, depending on user interactions. For instance, you can define a hover color for a button or an error color for a text box. In addition, you can also create screen animations, that are shown once a screen is loaded. These include entrance animations, such as slide in effects, and more complex animations that are defined for every widget.
Widget Animations
To add an animation to a widget, select a widget, and if the widget supports animations you can see in the lower right corner a tab bar with the different widget states, e.g. Normal and Hover. Note that this is only visible in Design view. If you press Hover, the properties panel will change and only show the properties that you can change for the hover state. Change the background, or text color. When you launch the simulator the selected color will be shown when you hover with the mouse over the widget.
Screen Animations
Before you create a screen animation, you have to create a link between a source (widget or screen) and a target screen. Once you have created the link, select the source element. In the properties panel, you can now select in the Action section the No Animation button. A popup will show up, that lets you define how the new screen is animated, for instance, if it is faded or slid in. You can also configure the duration and the easing function. You can also create dedicated loading animations that will animate each widget separately. Select a screen, and press the Animation button. The animation composer will show up, which lets you define for each widget an animation timeline. You can set the start and end of the animation. Press the icon to select the type of animation.
Please note that the Transform animation type works only if the first screen has an element with the same name. The animation will transform the previous widget (position and style) to the current one.
Screen Transforms
If you want more advanced animations you can use the Animation links. These special kinds of links create under the hoods for every widget a transform animation that is shown when the screen is loaded. The best way to work with animation links is to:
Create a screen with all elements in the initial state.
Create a copy of the screen.
Change the elements in the copy to define the end state of the animation.
Select the element which should trigger the animation and click on Add Action button and select Animation