Property animation in Qt

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.

How to do it…

1. First, let's create a new Qt Widgets Application project. After that, open up mainwindow.ui with Qt Designer and place a button on the main window, as shown here:

   

2. Next, open up mainwindow.cpp and add the following line of code at the beginning of the source code:

   #include <QPropertyAnimation>

3. After that, open up mainwindow.cpp and 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();

How it works...

One of the more common methods to animate a GUI element is through the property...