In this example, we will learn how to animate our Graphical User Interface (GUI) elements using Qt's property animation class, part of its powerful animation framework, which allows us to create fluid looking animation with minimal effort.
- First, let's create a new Qt Widgets Application project. After that, open up
mainwindow.uiwith Qt Designer and place a button on the main window, as shown here:
- Next, open up
mainwindow.cppand add the following line of code at the beginning of the source code:#include <QPropertyAnimation>
- After that, open up
mainwindow.cppand add the following code to the constructor:QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry"); animation->setDuration(10000); animation->setStartValue(ui->pushButton->geometry()); animation->setEndValue(QRect(200, 200, 100, 50)); animation->start();
One of the more common methods to animate a GUI element is through the property animation class provided by Qt, known as the QPropertyAnimation class. This class is part of the animation framework and it makes use of the timer system in Qt to change the properties of a GUI element over a given duration.
What we are trying to accomplish here is to animate the button from one position to another, while at the same time we also enlarge the button size along the way.
By including the QPropertyAnimation header in our source code in Step 2, we will be able to access the QPropertyAnimation class provided by Qt and make use of its functionalities.
The code in Step 3 basically creates a new property animation and applies it to the push button we just created in Qt Designer. We specifically request the property animation class changes the geometry properties of the push button and sets its duration to 3,000 milliseconds (3 seconds).
Then, the start value of the animation is set to the initial geometry of the push button, because obviously we want it to start from where we initially place the button in Qt Designer. The end value is then set to what we want it to become; in this case we will move the button to a new position at x: 200, y: 200 while changing its size to width: 100, height: 50 along the way.
After that, call animation->start() to start the animation.
Compile and run the project and now you should see the button start to move slowly across the main window while expanding in size a bit at a time, until it reaches its destination. You can change the animation duration and the target position and scale by altering the values in the preceding code. It's really that simple to animate a GUI element using Qt's property animation system!
Qt provides us with several different sub-systems to create animations for our GUI, including timer, timeline, animation framework, state machine framework, and graphics view framework:
- Timer: Qt provides us with repetitive and single-shot timers. When the timeout value is reached, an event callback function will be triggered through Qt's signal-and-slot mechanism. You can make use of a timer to change the properties (color, position, scale, and so on) of your GUI element within a given interval, in order to create an animation.
- Timeline: Timeline calls a slot periodically to animate a GUI element. It is quite similar to a repetitive timer, but instead of doing the same thing all the time when the slot is triggered, timeline provides a value to the slot to indicate its current frame index, so that you can do different things (such as offset to a different space of the sprite sheet) based on the given value.
- Animation framework: The animation framework makes animating a GUI element easy by allowing its properties to be animated. The animations are controlled by using easing curves. Easing curves describe a function that controls what the speed of the animation should be, resulting in different acceleration and deceleration patterns. The types of easing curve supported by Qt include: linear, quadratic, cubic, quartic, sine, exponential, circular, and elastic.
- State machine framework: Qt provides us with classes for creating and executing state graphs, which allow each GUI element to move from one state to another when triggered by signals. The state graph in the state machine framework is hierarchical, which means every state can also be nested inside of other states.
- Graphics view framework: The graphics view framework is a powerful graphics engine for visualizing and interacting with a large number of custom-made 2D graphical items. You can use the graphics view framework to draw your GUI and have them animated in a totally manual way if you are an experienced programmer.
By making use of all the powerful features mentioned here, we're able to create an intuitive and modern GUI with ease. In this chapter, we will look into the practical approaches to animating GUI elements using Qt.