Qt allows us to easily animate a UI component without writing a bunch of code. In this example, we will learn how to make our program's UI more interesting by applying animations to it.
- Once again, we will start everything from scratch. Therefore, create a new Qt Quick application project in Qt Creator and open up
MainForm.ui.qml. - Go to the Imports tab in the Library window and add a Qt Quick module called QtQuick.Controls to your project.
- After that, you will see a new category appear in the QML Types tab called Qt Quick - Controls, which contains many new widgets that can be placed on the canvas.
- Next, drag three button widgets to the canvas and set their height to
45. Then, go to the Layout tab on the Properties window and enable both the left and right anchors for all the three button widgets. Make sure the target for the anchors are set to Parent and the margins remain as0. This will make the buttons resize horizontally according to the width of the main window. After that, set the y value of the first button to0, the second to45, and the third to90. The UI should now look like this:
- Now, open up
qml.qrcwith the Editor and addfan.pngto the project:
- Then, add two mouse area widgets to the canvas. After that, drag a rectangle widget and an image widget on the canvas. Parent the rectangle and image to the mouse areas we have just added before this.
- Set the color of the rectangle to
#0000ffand applyfan.pngto the image widget. Your UI should now look like this:
- After that, export all the widgets in your
MainForm.ui.qmlas alias properties of the root item by clicking on the icons located to the right of the widget name:
- Next, we will apply animation and logic to the UI but we won't be doing it in
MainForm.ui.qml. Instead, we will do it all inmain.qml. - In
main.qml, remove the default code for the mouse area and add in a width and height for the window so that we get more space to preview:import QtQuick 2.5 import QtQuick.Window 2.2 Window { visible: true width: 480 height: 550 MainForm { anchors.fill: parent } } - After that, add the code that defines the behavior of the buttons in the
MainFormwidget:button1 { Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } } onClicked: { button1.y = button1.y + (45 * 3) } } button2 { Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } } onClicked: { button2.y = button2.y + (45 * 3) } } button3 { Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } } onClicked: { button3.y = button3.y + (45 * 3) } } - Then, follow this with the behavior of the
fanimage and the mouse area widget it is attached to:fan { RotationAnimation on rotation { id: anim01 loops: Animation.Infinite from: 0 to: -360 duration: 1000 } } mouseArea1 { onPressed: { if (anim01.paused) anim01.resume() else anim01.pause() } } - Last but not least, add the behavior of the rectangle and the mouse area widget it's attached to:
- If you compile and run the program now, you should see three buttons at the top of the window and a moving rectangle at the bottom left, followed by a spinning fan at the bottom right. If you click any of the buttons, they will move slightly downward with a nice, smooth animation. If you click on the rectangle, it will change color from blue to red. Meanwhile, the fan image will pause its animation if you click on it while it's animating, and it will resume the animation if you click on it again:
Most of the animation elements supported by the C++ version of Qt, such as transition, sequential animation, parallel animation, and so on, 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, but instead it will be interpolated, move across the canvas, and perform a little shaking animation when reaching its destination, which 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.