Article Directory
In QML animation design, you can create a timeline animation by specifying key frames; you can also bind the timeline to the property value of a component (such as a slider) to control the animation in this way.
1. Create an animation
Whether it's a keyframe animation or an animation bound to a property value, the first thing to do is create a timeline. Proceed as follows
(1-1) Create a timeline
(1) In the Timeline view, select the + (Add Timeline) button to add timeline settings, and add animation in the Timeline Settings dialog box.
(2) In the Timeline Settings tab:
-
In the Timeline ID field, type an id value to describe the timeline.
-
In the Start frame field, set the first frame of the timeline (negative numbers are allowed).
-
In the End frame field, set the last frame of the timeline.
(3) In the Animation Setting tab:
-
In the Animation ID field, type an ID describing an animation.
-
Select the "Running in Base State" checkbox to run the animation when the base state is applied.
-
In the Start frame field, set the first frame of the animation.
-
In the End frame field, set the last frame of the animation.
-
In the Duration field, set the length of the animation in milliseconds.
-
Select the Continues checkbox to loop the animation infinitely (this option is optional).
-
Check the "Ping pong" checkbox to play the animation backwards to the beginning when it ends, representing a bounce effect (this option is optional).
-
In the Finished field, select the state to transition to when the animation completes.
(4) Choose Closeto close the dialog box and save the settings.
So far, we have created the Timeline and animation, and then we can set the keyframes for the animation of the property.
(1-2) Create multiple timelines
In the actual QML animation design process, we can create multiple timelines. Creating multiple timelines can be used to: use different timelines in different states.
(1) In the Timeline view, open Timeline Settingsthe dialog box.
(2) Click the "+" button on the upper right of the Timelineline Setting tab to create another timeline (when not needed, click the "-" button to delete the timeline)
(3) In the table under the Animation Settings tab, set the timeline for the state.
To set keyframe values for the created timeline, first select the state in States, and you need to ensure that the timeline is available in the Timelines view.
Second, set the key frame value
When we are creating a timeline, Qt Design Studio will create an animation for the timeline. In actual development, we can also create multiple animations for a timeline. For example, an animation can be created to run a small segment of the timeline or to run the timeline in reverse.
To animate components in the Timeline view, we need to set keyframe values for the animated properties. Qt Design Studio will automatically add interpolation between two keyframes and set their values evenly.
To set a keyframe value for a component's property, the steps are as follows:
(1) In the Navigate view, select the component that needs to be animated.
(2) In the Properties view, select Action->Insert Keyframe to insert keyframes for the properties you want to animate. As shown below:
(3) In the Timeline view, select the Per Property Recording button to start recording property changes.
(4) Enter the value of the property in the field next to the property name on the timeline (make sure the playhead is at frame 0). Then press "Enter" to save the settings, as shown below:
(5) Move the playhead on the timeline to another frame and specify the attribute value on that frame.
(6) After specifying the desired value, select Per Property Recording again to stop recording.
3. Bind the timeline to the property
When we bind the timeline to a component property, the current frame of the animation is controlled by the value of that property.
If there is such an example: bind the timeline to the slider component, and the animation on the timeline is determined by the sliding value of the slider.
Its timeline and key frame setting steps are as follows:
(1) First, we drag a slider from Components to the 2D or Navigator view.
(2) In the Navigator view, select the slider and enter its Properties view, set Tothe property to 1000 (if you want to use the slider to control the complete animation, the From and To values of the slider should be the same as the Start Frame and End Frame values of the timeline match.)
(3) In the Timeline Settings dialog box, you can select the "-" button in the upper right corner to delete the animation.
(4) In Expression binding, enter slider.valuethe binding expression. As shown below:
Fourth, bind the animation to the state
We can bind animations to states, which means that when a state is entered, the animation runs automatically.
The steps to bind an animation to a state are as follows:
(1) In the table at the bottom of the Timeline Setting dialog box:
-
Double-click the value in the Timeline field and select the timeline with the animation you want to bind to the state.
-
Double-click the value in the Animation field and select the animation to bind to the state.
If you want to bind the state to a keyframe in the animation without running the animation, set the keyframe in the Fixed Frame field:
5. Manage keyframes
In this section, describe how to edit, copy, and delete keyframes.
(5-1) Edit keyframe
To delete a property change record, right-click on the property name in the timeline and select "Remove Property":
To add a keyframe to a component's keyframe track at the current playback frame, right-click on the component name in the timeline and select "Add Keyframes at Current Frame".
(5-2) Edit the value of the key frame
If we need to fine-tune the value of the keyframe, we can double-click the keyframe marker or right-click the menu, and select "Edit Keyframe" in the pop-up menu.
In the "Edit Keyframe" dialog box, the properties of the current frame animation and the property values of the current frame are displayed.
(5-3) Copy keyframes
When editing keyframes, you can copy keyframes from a component's keyframe track and paste them onto another component's keyframe track.
Right-click a component ID and select Copy All Keyframes in the context menu, right-click another component ID and select Paste Keyframes in the context menu, and copy all keyframes through the above two steps.
(5-4) Delete keyframe
Right-click the keyframe you want to delete and select "Delete Keyframe" from the context menu to delete the keyframe.
If you need to delete all keyframes from a selected component, you need to right-click on the component name in the timeline and select "Delete All Keyframes" from the context menu.
To preview the designed animation, perform one of the following operations in the Timeline view: (1) Drag the playhead along the timeline. (2) Select the play button or press the space bar (Space).
To preview the full UI, select the (Show Live Preview) button on the canvas toolbar or press Alt+P.
6. Summary
For timeline animation, it is essentially an interpolation animation, which does not change the property to the target value immediately, but is driven by interpolation, and the animation curve can be selected to control the interpolation method of the animation. (Select the keyframe, right-click to pop up the context menu, and select "Edit Easing Curve" to edit the animation curve):
