Creating Animations

You can use the timeline and keyframe based editor in the Timeline view to animate the properties of UI components. Animating properties enables their values to move through intermediate values instead of immediately changing to the target value. For example, to move an item in a scene, you can animate the properties that control the item's position, x and y, so that the item's position changes at keyframes on the way to the target position. Similarly, you could change the color and scale properties of the item at keyframes to make it appear to move closer or farther away.

Qt Quick allows you to declare various UI states in State objects. These states are comprised of property changes from a base state, and can be a useful way of organizing your UI logic. Transitions are objects you can associate with an item to define how its properties will animate when they change due to a state change.

You can find a video tutorial about creating timelines and adding keyframes here.

Creating Timelines

You specify settings for the timeline and for running the animation in the Timeline Settings dialog.

"Timeline Settings dialog"

To create a timeline to animate a UI component:

  1. In the Navigator, select the item to animate.
  2. Select the Timeline tab to open the Timeline view.
  3. Select the (Add Timeline (A)) button, or press a to specify settings for the timeline and running the animation in the Timeline Settings dialog.
  4. In the Timeline ID field, enter a name that describes the animated item.
  5. In the End frame field, set the duration of the animation.
  6. To use bindings to specify the properties, select the Expression binding check box and enter the binding in the Expression binding field. For more information about property binding, see Setting Bindings.
  7. Select Create Animation.
  8. In the Animation tab, Animation ID field, enter a name for the animation.
  9. Select the Running check box to use the settings in this tab when previewing the UI. Deselect the check box to use the default settings.
  10. In the Start frame field, set the first frame of the animation.
  11. In the End frame field, set the last frame of the animation.
  12. 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.
  13. Select the Continuous check box to loop the animation indefinitely.
  14. 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
  15. Select the Ping pong check box to play the animation backwards back to the beginning when it reaches the end.
  16. Select Close to close the dialog and save the settings.

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

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.

Navigating the Timeline

"Timeline view"

You can navigate the timeline in the following ways:

  • Drag the playhead (1) to a frame.
  • Click on the ruler to move to a frame.
  • Select the To Start (Home), Previous (,), or Next (.) buttons (2), or use the keyboard shortcuts to move to the first, previous, or next frame on the timeline.
  • Enter the number of a frame in the field (3) to move to that frame.
  • Select the Previous and Next buttons next to a property name on the timeline (4) to move to the previous or next keyframe for that property.

Setting Keyframe Values

To set property values at keyframes:

  1. In the Navigator, select the item to animate.
  2. Select the (Auto Key (K)) button (or press k) to set property values at specific keyframes.
  3. Specify the property value at the start frame.
  4. Move the playhead to a keyframe on the timeline and specify the value at that frame.
  5. When you have added all the keyframes you need, select Auto Key (K) again to stop recording keyframes.
  6. To add keyframes for another property of the item, select Insert Keyframe in the menu next to the property in the Properties view.

Keyframes a 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, for example.

To edit the value of the selected keyframe, select Edit Value for Keyframe in the context menu.

You can copy a set of keyframes and paste them at another location on the timeline. To copy all keyframes from one item to another one, select an item, and then select Copy All Keyframes from Item in the context menu. Then select the other item and select Paste Keyframes to Item in the context menu.

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

To delete all keyframes from the selected item, select Delete All Keyframes from Item 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 Show Live Preview on the canvas toolbar.

Editing Easing Curves

Easing specifies the rate of a property value over time, so that components can appear to pick up speed, slow down, or bounce back at the end of the animation. By default, the animations you specify on the timeline are linear, which means that they move from the beginning to the end at a constant speed. You can use the curve picker to edit the easing curve at a keyframe.

To edit easing curves:

  1. Select a keyframe on the timeline.
  2. Select Curve Picker (C) on the toolbar, or press c.
  3. Select a preset curve as a starting point and drag the curve handlers around until the curve fits your needs. For more information about easing curve types, see the documentation for easing curves.
  4. Select Add Point to add points to the curve.
  5. In the Duration field, select the duration of the easing function.
  6. Select Animate to preview the curve.
  7. Select Apply to apply the easing curve to the keyframe.

When you apply easing curves to animations, the shape of the keyframe marker changes from to .

To paste easing curve definitions to the curve picker as text, select the Text tab.

Rotating Items

To animate components that rotate around a central point, you can use the Item QML type 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 Studio components to animate the following shapes:

  • Arc
  • Border
  • Pie
  • Rectangle
  • Triangle

© 2019 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.