- Qt Creator Manual
- Transition Editor
- Qt Creator Manual 5.0.0-rc1

States ◦ Timeline

# Transition Editor

To make movement between states smooth, you can use Transition Editor to animate the changes between states.

First, you need to add states in the States view and edit some properties that can be animated, such as colors or numbers, in the Properties view. For example, you can animate the changes in the position of a component.

In Transition Editor, you can set the start frame, end frame, and duration for the transition of each property. You can also set an easing curve for each animation and the maximum duration of the whole transition.

## Zooming in Transition Editor

Use the slider on the toolbar to set the zooming level in Transition Editor. Select the and buttons to zoom out of or into the view.

## Summary of Transition Editor Toolbar Actions

Button/Field | Action | Read More
--- | --- | ---
| Opens Transition Settings dialog for editing transition settings. | Specifying Transition Settings
Transition ID | Displays a list of transitions that you can open in Transition Editor. | Animating Transitions Between States
| Opens Easing Curve Editor for attaching an easing curve to the selected transition. | Editing Easing Curves
| Zoom Out (Ctrl+-): zooms out of the view. | Zooming in Transition Editor
Slider | Sets the zooming level. | Zooming in Transition Editor
| Zoom In (Ctrl++): zooms into the view. | Zooming in Transition Editor
Maximum Duration | Specifies the maximum duration of the transition. |

## Animating Transitions Between States

To animate transitions:

1. Select View > Views > Transition Editor.

2. Select the (Add Transition) button to add a transition. This works only if you have added at least one state and modified at least one property in it.

3. Move the blue bar next to the component or property name to set the start and end frame of the animation of the property. Pull its left and right edges to set the duration of the animation.
4. To attach an easing curve to the selected transition, select the (Easing Curve Editor (C)) button.

## Specifying Transition Settings

To modify transition settings, select the (Transition Settings (S)) button in Transition Editor.

To add transitions:

1. Select the (Add Transition) button.
2. In the Transition ID field, enter an ID for the transition.
3. In the From field, select the state to transition from.
4. In the To field, select the state to transition to.

To remove the current transition, select the (Remove Transition) button.

For an example of animating transitions between states, see Creating a Qt Quick Application.

States ◦ Timeline