The Animation Framework

The animation framework aims to provide an easy way for creating animated and smooth GUIs. By animating Qt properties, the framework provides great freedom for animating widgets and other QObjects. The framework can also be used with the Graphics View framework. Many of the concepts available in the animation framework are also available in Qt Quick, where it offers a declarative way of defining animations. Much of the knowledge acquired about the animation framework can be applied to Qt Quick.


The Animation Architecture

We will in this section take a high-level look at the animation framework's architecture and how it is used to animate Qt properties. The following diagram shows the most important classes in the animation framework.

The animation framework foundation consists of the base class QAbstractAnimation, and its two subclasses QVariantAnimation and QAnimationGroup. QAbstractAnimation is the ancestor of all animations. It represents basic properties that are common for all animations in the framework; notably, the ability to start, stop, and pause an animation. It is also receives the time change notifications.


Complex animations can be constructed by building a tree structure of QAbstractAnimations. The tree is built by using QAnimationGroups, which function as containers for other animations. Note also that the groups are subclasses of QAbstractAnimation, so groups can themselves contain other groups.

The animation framework can be used on its own, but is also designed to be part of the state machine framework (See the state machine framework for an introduction to the Qt state machine). The state machine provides a special state that can play an animation. A QState can also set properties when the state is entered or exited, and this special animation state will interpolate between these values when given a QPropertyAnimation. We will look more closely at this later.



Classes in the Animation Framework

These classes provide a framework for creating both simple and complex animations.


The base of all animations


Abstract base class for groups of animations


Parallel group of animations


Pause for QSequentialAnimationGroup


Animates Qt properties


Sequential group of animations


Base class for animations


Easing curves for controlling animation


Timeline for controlling animations

Animating Qt Properties

As mentioned in the previous section, the QPropertyAnimation class can interpolate over Qt properties. It is often this class that should be used for animation of values; in fact, its superclass, QVariantAnimation, has an empty implementation of updateCurrentValue(), and does not change any value unless we change it ourselves on the valueChanged signal.


QPushButton button("Animated Button");;

QPropertyAnimation animation(&button, "geometry");


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


QPushButton button("Animated Button");;

QPropertyAnimation animation(&button, "geometry");




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_PROPERTY(QRectF geometry READ geometry WRITE setGeometry)



Animations and the Graphics View Framework

When you want to animate QGraphicsItems, you also use QPropertyAnimation. However, QGraphicsItem does not inherit QObject. A good solution is to subclass the graphics item you wish to animate. This class will then also inherit QObject. This way, QPropertyAnimation can be used for QGraphicsItems. The example below shows how this is done. Another possibility is to inherit QGraphicsWidget, which already is a QObject.

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



Easing Curves


QPushButton button("Animated Button");;

QPropertyAnimation animation(&button, "geometry");



Here the animation will follow a curve that makes it bounce like a ball as if it was dropped from the start to the end position. QEasingCurve has a large collection of curves for you to choose from. These are defined by the QEasingCurve::Type enum. If you are in need of another curve, you can also implement one yourself, and register it with QEasingCurve.

Putting Animations Together


The subclasses of QAnimationGroup (QSequentialAnimationGroup and QParallelAnimationGroup) are containers for other animations so that these animations can be animated either in sequence or parallel. The QAnimationGroup is an example of an animation that does not animate properties, but it gets notified of time changes periodically. This enables it to forward those time changes to its contained animations, and thereby controlling when its animations are played.

Let's look at code examples that use both QSequentialAnimationGroup and QParallelAnimationGroup, starting off with the latter.

QPushButton *bonnie = new QPushButton("Bonnie");

QPushButton *clyde = new QPushButton("Clyde");

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

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

QParallelAnimationGroup *group = new QParallelAnimationGroup;



QPushButton button("Animated Button");;

QPropertyAnimation anim1(&button, "geometry");

QPropertyAnimation anim2(&button, "geometry");

QSequentialAnimationGroup group;



As you no doubt have guessed, QSequentialAnimationGroup plays its animations in sequence. It starts the next animation in the list after the previous is finished.


Animations and States

When using a state machine, we can associate one or more animations to a transition between states using a QSignalTransition or QEventTransition class. These classes are both derived from QAbstractTransition, which defines the convenience function addAnimation() that enables the appending of one or more animations triggered when the transition occurs.



QStateMachine *machine = new QStateMachine;

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

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"));


