In any modern user interface, transitioning between states and animating the user interface is highly beneficial. These are first-class concepts in Qt Quick Ultralite.

This page describes the concept of states, state transitions, and property animations. It details which concepts are important and why, and how those concepts interrelate. It also provides links to details about the QML types that Qt Quick Ultralite provides to implement those concepts.

States

The state of a particular visual item is the set of information which describes how and where the individual parts of the visual item are displayed within it, and all the data associated with that state. The most visual items in a user interface will have a limited number of states, each with well-defined properties.

For example, an element in a list may be either selected or not, and if selected, it may be either the currently active single selection, or it may be part of a selection group.

Each of those states may have specific associated visual appearance (neutral, highlighted, expanded, and so forth).

Qt Quick Ultralite provides a State type with properties that define its semantics and can be used to trigger behavior or animations. For details, see Using states.

Transitions

When a visual item transitions from one state to another, the appearance of that item will change. A transition is an edge between two states. It may trigger other events to occur, as other parts of the application may have behavior triggered when a certain state is entered or left.

Qt Quick provides the Transition type, which has properties that define what will occur when the application changes from one state to another. For more information about transitions, see Transitions during state changes.

Animations

When transitioning between states, a fluid animation can be used to aid the user during the transition. Abrupt and unexpected changes to the visual canvas result in a suboptimal user experience and need to be avoided.

If an element in a list becomes selected, the color change (from neutral to highlighted) can be animated. If the position of the element in the list is changed, it can be moved in a fluidly animated fashion so that the eye of the user can track the change.

These types of animations are supported in Qt Quick Ultralite through various animation and transition types. For information about these types and how to use them, see Animation and transitions.

Animating property assignments

Animations are not only related to states and transitions between states. For example, an animation might be triggered by other events, which are not associated with a distinct state.

It is often beneficial to animate changes to certain properties of visual items, regardless of the cause of the change (for example, opacity effects). Qt Quick Ultralite provides the Behavior type that allows the client to specify animation behavior for changes to properties.

For more information about using the Behavior type to animate on property changes, refer to default property animations.

Sprite animation

Qt Quick Ultralite offers the AnimatedSprite type to draw the sprites (with some limitations compared to the Qt Quick implementation). It also offers the AnimatedSpriteDirectory type that lets you use a directory with many sources instead of one large image. To use the resources in a directory for a sprite animation, tag them using ImageFiles.MCU.resourceAnimatedSprite in your qmlproject. Tagging such resources enables the Qt Quick Ultralite Tools to find them at compile time.