Creating Timeline Animations

You can create timeline and keyframe based animations for linear interpolation through intermediate values at specified keyframes instead of immediately changing to the target value.

Creating Timelines

You specify settings for the timeline and for running the animation in the Timeline Settings dialog. The Animation radio button is selected for a timeline animation and the Expression binding radio button for a property animation.

"Timeline Settings dialog"

To create a timeline to animate a UI component:

  1. In the Timeline view, select the (Add Timeline) button to specify settings for the timeline and running the animation in the Timeline Settings dialog.
  2. In the Timeline ID field, enter an ID that describes the animated component.
  3. In the Start frame field, set the first frame of the timeline. Negative values are allowed.
  4. In the End frame field, set the last frame of the timeline.
  5. In the Animation ID field, enter an ID for the animation.
  6. Select the Running in Base State check box to run the animation when the base state is applied. Deselect the check box if you want to run the animation when some other state is applied. For more information, see Binding Animations to States.
  7. In the Start frame field, set the first frame of the animation.
  8. In the End frame field, set the last frame of the animation.
  9. In the Duration field, set the length of the animation from the start frame to the end frame. If you set a shorter duration than the number of frames, frames are left out from the end of the animation when viewing it.
  10. Select the Continuous check box to loop the animation indefinitely.
  11. In the Loops field, select the number of times to run the animation as a loop. The default number of loops is one, which means that you must restart the animation to see it again
  12. Select the Ping pong check box to play the animation backwards back to the beginning when it reaches the end.
  13. In the Finished field, select the state to apply when the animation finishes.
  14. Select Close to close the dialog and save the settings.

To create additional timelines, select the (Add Timeline) button next to the Timeline Settings tab.

To specify settings for running timeline animations, select the (Add Animation) button next to the Animation Settings tab. For example, you could create settings for running a part of the timeline animation between specified frames or for running the animation backwards from the last frame to the first.

To modify the settings, select the (Timeline Settings (S)) button on the toolbar (or press S) in the Timeline view.

Binding Animations to States

The table at the bottom of the Timeline Settings dialog lists the available states. Double-click the values in the Timeline and Animation column to bind the states to animations. In the Fixed Frame column, you can bind the states that don't have animations to fixed frames.

Managing Keyframes

To animate components in the Timeline view, move to a frame on the timeline and specify changes in the values of a property. Qt Design Studio automatically adds keyframes between two keyframes and sets their values evenly to create an appearance of movement or transformation.

"Timeline view"

Setting Keyframe Values

You can insert keyframes for all the properties of all the components that you want to animate first, and then record the changes in their values by selecting the (Per Property Recording) button for one property at a time. For example, you can hide and show components by turning their visibility off and on or by setting their opacity to 0 or 1.

You can also select the Auto Key (K) button (or press K) to record changes in property values, but you need to be more careful about which property values you are changing to avoid surprises.

To record the changes of property values:

  1. In the Navigator view, select the component to animate.
  2. In the Properties view, select (Actions) > Insert Keyframe for the property that you want to animate.
  3. In the Timeline view, select the Per Property Recording button to start recording property changes.
  4. Check that the playhead is in frame 0 and enter the value of the property in the field next to the property name on the timeline. Press Enter to save the value.
  5. Move the playhead to another frame on the timeline and specify the value at that frame. For more information, see Navigating in Timeline.
  6. When you have specified as many values as you need, select Per Property Recording again to stop recording.

To remove all the changes you recorded for a property, right-click the property name on the timeline and select Remove Property.

To add keyframes to the keyframe track of a component at the current position of the playhead, select Add Keyframes at Current Frame.

Keyframes are marked on the timeline by using markers of different colors and shapes, depending on whether they are active or inactive or whether you have applied easing curves to them.

Editing Keyframe Values

To fine-tune the value of a keyframe, double-click a keyframe marker or select Edit Keyframe in the context menu.

The Edit Keyframe dialog displays the name of the property you are animating and its current value at the frame specified in the Frame field. You can change both the keyframe and its value.

"Edit Keyframe dialog"

Copying Keyframes

You can copy the keyframes from the keyframe track for a component and paste them to the keyframe track of another component. To copy all keyframes from one track to another one, first right-click the component ID and select Copy All Keyframes in the context menu. Then right-click the other component ID, and select Paste Keyframes in the context menu.

Deleting Keyframes

To delete the selected keyframe, select Delete Keyframe in the context menu.

To delete all keyframes from the selected component, select Delete All Keyframes in the context menu.

Viewing the Animation

You can view the animation on the canvas by moving the playhead along the timeline.

To preview the animation, select the Play (Space) button or press Space. To preview the whole UI, select the (Show Live Preview) button on the canvas toolbar or press Alt+P.

Animating Rotation

To animate components that rotate around a central point, you can use the Item component as a parent for the rotating component. Then create a timeline for the Item, and set the rotation property for the start and end keyframes.

Animating Shapes

You can use the Qt Quick Studio Components to animate the following shapes:

Available under certain Qt licenses.
Find out more.