Most of the animation elements supported by the C++ version of Qt, such as transition, sequential animation, and parallel animation, are also available in Qt Quick. If you are familiar with the Qt animation framework in C++, you should be able to grasp this pretty easily.

In this example, we added a spring animation element to all three buttons that specifically tracked their respective y-axes. If Qt detects that the y value has changed, the widget will not instantly pop to the new position—instead it will be interpolated, move across the canvas, and perform a little shaking animation when reaching its destination that simulates the spring effect. We just have to write one line of code and leave the rest to Qt.

As for the fan image, we added a rotation animation element to it and set the duration to 1000 milliseconds, which means it will complete a full rotation in one second. We also set it to loop its animation infinitely. When we clicked on the mouse area widget it's attached to, we just called pause() or resume() to enable or disable the animation.

Next, for the rectangle widget, we added two states to it, one called BLUE and one called RED, each of which carries a color property that will be applied to the rectangle upon state change. At the same time, we added a sequential animation group to the mouse area widget that the rectangle is attached to, and then added two property animation elements to the group. You can also mix different types of group animation; Qt can handle this very well.