The Animation Framework

Animating Qt Properties

As mentioned in the previous section, the QPropertyAnimation class can interpolate over Qt properties. It is this class that should be used for animation of values; in fact, its superclass, QVariantAnimation, is an abstract class, and cannot be used directly.

A major reason we chose to animate Qt properties is that it presents us with freedom to animate already existing classes in the Qt API. Notably, the QWidget class (which we can also embed in a QGraphicsView) has properties for its bounds, colors, etc. Let's look at a small example:

 QPushButton button("Animated Button");
 button.show();

 QPropertyAnimation animation(&button, "geometry");
 animation.setDuration(10000);
 animation.setStartValue(QRect(0, 0, 100, 30));
 animation.setEndValue(QRect(250, 250, 100, 30));

 animation.start();

This code will move button from the top left corner of the screen to the position (250, 250) in 10 seconds (10000 milliseconds).

The example above will do a linear interpolation between the start and end value. It is also possible to set values situated between the start and end value. The interpolation will then go by these points.

 QPushButton button("Animated Button");
 button.show();

 QPropertyAnimation animation(&button, "geometry");
 animation.setDuration(10000);

 animation.setKeyValueAt(0, QRect(0, 0, 100, 30));
 animation.setKeyValueAt(0.8, QRect(250, 250, 100, 30));
 animation.setKeyValueAt(1, QRect(0, 0, 100, 30));

 animation.start();

In this example, the animation will take the button to (250, 250) in 8 seconds, and then move it back to its original position in the remaining 2 seconds. The movement will be linearly interpolated between these points.

You also have the possibility to animate values of a QObject that is not declared as a Qt property. The only requirement is that this value has a setter. You can then subclass the class containing the value and declare a property that uses this setter. Note that each Qt property requires a getter, so you will need to provide a getter yourself if this is not defined.

 class MyGraphicsRectItem : public QObject, public QGraphicsRectItem
 {
     Q_OBJECT
     Q_PROPERTY(QRectF geometry READ geometry WRITE setGeometry)
 };

In the above code example, we subclass QGraphicsRectItem and define a geometry property. We can now animate the widgets geometry even if QGraphicsRectItem does not provide the geometry property.

For a general introduction to the Qt property system, see its overview.

 class Pixmap : public QObject, public QGraphicsPixmapItem
 {
     Q_OBJECT
     Q_PROPERTY(QPointF pos READ pos WRITE setPos)
     ...

 QPushButton button("Animated Button");
 button.show();

 QPropertyAnimation animation(&button, "geometry");
 animation.setDuration(3000);
 animation.setStartValue(QRect(0, 0, 100, 30));
 animation.setEndValue(QRect(250, 250, 100, 30));

 animation.setEasingCurve(QEasingCurve::OutBounce);

 animation.start();

 QPushButton *bonnie = new QPushButton("Bonnie");
 bonnie->show();

 QPushButton *clyde = new QPushButton("Clyde");
 clyde->show();

 QPropertyAnimation *anim1 = new QPropertyAnimation(bonnie, "geometry");
 // Set up anim1

 QPropertyAnimation *anim2 = new QPropertyAnimation(clyde, "geometry");
 // Set up anim2

 QParallelAnimationGroup *group = new QParallelAnimationGroup;
 group->addAnimation(anim1);
 group->addAnimation(anim2);

 group->start();

 QPushButton button("Animated Button");
 button.show();

 QPropertyAnimation anim1(&button, "geometry");
 anim1.setDuration(3000);
 anim1.setStartValue(QRect(0, 0, 100, 30));
 anim1.setEndValue(QRect(500, 500, 100, 30));

 QPropertyAnimation anim2(&button, "geometry");
 anim2.setDuration(3000);
 anim2.setStartValue(QRect(500, 500, 100, 30));
 anim2.setEndValue(QRect(1000, 500, 100, 30));

 QSequentialAnimationGroup group;

 group.addAnimation(&anim1);
 group.addAnimation(&anim2);

 group.start();

 QPushButton *button = new QPushButton("Animated Button");
 button->show();

 QStateMachine *machine = new QStateMachine;

 QState *state1 = new QState(machine);
 state1->assignProperty(button, "geometry", QRect(0, 0, 100, 30));
 machine->setInitialState(state1);

 QState *state2 = new QState(machine);
 state2->assignProperty(button, "geometry", QRect(250, 250, 100, 30));

 QSignalTransition *transition1 = state1->addTransition(button,
     SIGNAL(clicked()), state2);
 transition1->addAnimation(new QPropertyAnimation(button, "geometry"));

 QSignalTransition *transition2 = state2->addTransition(button,
     SIGNAL(clicked()), state1);
 transition2->addAnimation(new QPropertyAnimation(button, "geometry"));

 machine->start();