Le framework d'animation

Le framework d'animation offre un moyen simple d'animer les éléments de votre interface graphique. Il vous permet d'animer la valeur d'une propriété Qt d'un widget ou de QObject. La plupart des fonctionnalités proposées par le framework sont également disponibles dans Qt Quick, où il est possible de définir des animations de manière déclarative.

Cette présentation explique l’architecture du framework, avec des exemples illustrant les techniques couramment utilisées pour animer des QObject et des éléments de l’interface graphique.

L'architecture d'Animation

Le diagramme suivant présente les classes les plus importantes fournies par le framework :

Elle comprend la classe ` QAbstractAnimation `, qui fournit les bases nécessaires aux animations. Cette classe définit les propriétés génériques de toutes les animations prises en charge par le framework. Par exemple, la possibilité de démarrer, d’arrêter et de mettre en pause une animation. La classe reçoit également les notifications de changement d’heure.

Le framework fournit en outre les classes ` QVariantAnimation ` et ` QAnimationGroup `, qui s’appuient sur leur classe de base, ` QAbstractAnimation`. Vient ensuite dans la hiérarchie la classe ` QPropertyAnimation`, dérivée de ` QVariantAnimation`, qui vous permet d’animer une propriété Qt d’un widget ou d’un ` QObject`. Cette classe effectue une interpolation sur la valeur de la propriété à l’aide d’une courbe d’accélération. Une fois ces éléments en place, il vous suffit d’une classe ` QObject ` comportant une propriété Qt dont vous pouvez animer la valeur.

Des animations complexes peuvent être créées en construisant une structure arborescente d’ QAbstractAnimations, où l’arborescence est un « QAnimationGroup » contenant d’autres animations. Ces groupes d’animations peuvent également contenir des sous-groupes représentant différents groupes ou animations, tels que « QParallelAnimationGroup » et « QSequentialAnimationGroup ».

En arrière-plan, toutes les animations sont contrôlées par un minuteur global, qui envoie des « updates » concernant toutes les animations en cours d’exécution.

Pour plus d’informations sur ces classes individuelles et leur rôle au sein du framework, consultez leur documentation.

Classes proposées par le framework

Ces classes fournissent l’infrastructure nécessaire pour créer des animations aussi bien simples que complexes.

Animation des propriétés Qt

La classe QPropertyAnimation étant capable d’interpoler les propriétés Qt, elle est souvent utilisée. En effet, sa superclasse —QVariantAnimation— fournit une implémentation abstraite de la méthode updateCurrentValue(), qui ne modifie aucune valeur à moins que vous ne la modifiiez dans l valueChanged signal.

Le framework vous permet d’animer les propriétés Qt des classes existantes dans Qt. Par exemple, la classe ` QWidget ` — qui peut être intégrée dans un ` QGraphicsView` — dispose de propriétés pour ses limites, ses couleurs, etc. L’exemple suivant montre comment animer un widget ` QPushButton ` :

#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>

class MyButtonWidget : public QWidget
{
public:
    MyButtonWidget(QWidget *parent = nullptr);
};

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *button = new QPushButton(tr("Animated Button"), this);
    QPropertyAnimation *anim = new QPropertyAnimation(button, "pos", this);
    anim->setDuration(10000);
    anim->setStartValue(QPoint(0, 0));
    anim->setEndValue(QPoint(100, 250));
    anim->start();
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MyButtonWidget buttonAnimWidget;
    buttonAnimWidget.resize(QSize(800, 600));
    buttonAnimWidget.show();
    return a.exec();
}

L'exemple anime la propriété Qt ` pos ` d'un ` QPushButton` afin de le déplacer du coin supérieur gauche de l'écran vers la position finale (250, 250) en 10 secondes (10 000 millisecondes).

Il utilise la méthode d’interpolation linéaire pour contrôler la vitesse de l’animation entre les valeurs de départ et d’arrivée. Essayez d’ajouter une autre valeur entre la valeur de départ et la valeur d’arrivée pour voir comment elles sont interpolées. Cette fois-ci, utilisez la fonction ` QPropertyAnimation::setKeyValueAt()` pour ajouter ces valeurs :

...
anim->setDuration(10000);
anim->setKeyValueAt(0, QPoint(0, 0));
anim->setKeyValueAt(0.8, QPoint(250, 250));
anim->setKeyValueAt(1, QPoint(0, 0));
...

Dans cet exemple, l’animation déplace le bouton vers (250, 250) en 8 secondes, puis le ramène à sa position d’origine dans les 2 secondes restantes. Le mouvement du bouton fait l’objet d’une interpolation linéaire entre ces points.

Vous pouvez également animer la valeur d’une ` QObject` qui n’est pas déclarée comme propriété Qt, à condition que cette valeur dispose d’une méthode setter. Dans ce cas, dérivez une nouvelle classe de la classe contenant la valeur, puis ajoutez une propriété Qt pour cette valeur avec la méthode setter.

class MyGraphicsRectItem : public QObject, public QGraphicsRectItem
{
    Q_OBJECT
    Q_PROPERTY(QPointF pos READ pos WRITE setPos)
};

Dans cet exemple, l’ MyGraphicsRectItem dérive de QGraphicsRectItem et QObject, et définit la propriété pos. Vous pouvez animer l’ pos de l’élément même si QGraphicsRectItem ne fournit pas la propriété pos.

Pour une introduction générale au système de propriétés de Qt, consultez la section « Système de propriétés de Qt ».

Animations et le framework Graphics View

QPropertyAnimation peut également être utilisé pour animer un élément « QGraphicsItem » qui n’hérite pas de « QObject ». Dans ce cas, vous dérivez une classe de l’élément graphique que vous souhaitez animer. Cette classe dérivée doit également hériter de « QObject » afin de permettre l’utilisation de « QPropertyAnimation » sur un élément « QGraphicsItem ». L’exemple suivant montre comment procéder :

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

Comme décrit dans la section précédente, vous devez définir les propriétés que vous souhaitez animer. La classe dérivée doit d'abord hériter de QObject, car le système de méta-objets l'exige.

Courbes d'accélération

Un ` QPropertyAnimation ` effectue une interpolation linéaire entre les valeurs de propriété de départ et d’arrivée. Outre l’ajout de valeurs clés supplémentaires à l’animation, vous pouvez également choisir une courbe d’accélération pour contrôler la vitesse d’interpolation entre 0 et 1, sans modifier le tracé.

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *button = new QPushButton(tr("Animated Button"), this);
    QPropertyAnimation *anim = new QPropertyAnimation(button, "pos", this);
    anim->setDuration(10000);
    anim->setStartValue(QPoint(0, 0));
    anim->setEndValue(QPoint(100, 250));
    anim->setEasingCurve(QEasingCurve::OutBounce);
    anim->start();
}

Dans cet exemple, l’animation suit une courbe qui fait rebondir l’ button comme une balle. QEasingCurve propose une vaste collection de courbes parmi lesquelles choisir dans l’énumération QEasingCurve::Type. Si vous souhaitez utiliser une autre courbe qui n’est pas disponible, implémentez-la vous-même et enregistrez-la via QEasingCurve.

Regroupement d’animations

Une application contient souvent plusieurs animations. Par exemple, elle peut vouloir déplacer plusieurs éléments graphiques simultanément ou les déplacer les uns après les autres.

Les sous-classes de ` QAnimationGroup` — `QSequentialAnimationGroup ` et ` QParallelAnimationGroup` — sont des conteneurs pour d’autres animations, ce qui permet de les animer soit en séquence, soit en parallèle. L’objet ` QAnimationGroup ` n’anime pas les propriétés, mais il est informé périodiquement des changements de temps. Cela lui permet de transmettre ces changements aux groupes d’animations, qui contrôlent le moment où leurs animations sont lues.

Les deux exemples suivants illustrent l’utilisation d’ QSequentialAnimationGroup et d’ QParallelAnimationGroup:

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *bonnie = new QPushButton(tr("Bonnie"), this);
    QPushButton *clyde = new QPushButton(tr("Clyde"), this);

    QPropertyAnimation *anim1 = new QPropertyAnimation(bonnie, "pos", this);
    anim1->setDuration(3000);
    anim1->setStartValue(QPoint(0, 0));
    anim1->setEndValue(QPoint(100, 250));

    QPropertyAnimation *anim2 = new QPropertyAnimation(clyde, "pos", this);
    anim2->setDuration(3000);
    anim2->setStartValue(QPoint(100, 250));
    anim2->setEndValue(QPoint(500, 500));

    QParallelAnimationGroup *parallelAnim = new QParallelAnimationGroup;
    parallelAnim->addAnimation(anim1);
    parallelAnim->addAnimation(anim2);
    parallelAnim->start();
}

Un groupe parallèle lit plusieurs animations en même temps. Sa fonction start() lance toutes les animations qui font partie du groupe.

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *bonnie = new QPushButton(tr("Bonnie"), this);
    QPushButton *clyde = new QPushButton(tr("Clyde"), this);

    QPropertyAnimation *anim1 = new QPropertyAnimation(bonnie, "pos", this);
    anim1->setDuration(3000);
    anim1->setStartValue(QPoint(0, 0));
    anim1->setEndValue(QPoint(100, 250));

    QPropertyAnimation *anim2 = new QPropertyAnimation(clyde, "pos", this);
    anim2->setDuration(3000);
    anim2->setStartValue(QPoint(0, 0));
    anim2->setEndValue(QPoint(200, 250));

    QSequentialAnimationGroup *sequenceAnim = new QSequentialAnimationGroup;
    sequenceAnim->addAnimation(anim1);
    sequenceAnim->addAnimation(anim2);
    sequenceAnim->start();
}

Comme son nom l’indique, un groupe « QSequentialAnimationGroup » lit ses animations les unes après les autres. Il lance l’animation suivante de la liste une fois que la précédente est terminée.

Un groupe est lui-même une animation ; vous pouvez donc l’ajouter à un autre groupe. Cela permet de construire une arborescence d’animations, qui définit l’ordre de lecture des animations les unes par rapport aux autres.

Propriété des objets

Une « QPropertyAnimation » doit toujours avoir un parent qui contrôle sa durée de vie. Une application type peut inclure plusieurs animations regroupées, le groupe d’animations prenant alors la propriété de ces animations. Une « QPropertyAnimation » indépendante doit se voir attribuer explicitement un parent afin de contrôler sa durée de vie. Dans l’exemple suivant, vous pouvez voir qu’une « QPropertyAnimation » indépendante a pour parent l’instance « QApplication » :

#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>

class MyButtonWidget : public QWidget
{
public:
    MyButtonWidget(QWidget *parent = nullptr);
};

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *button = new QPushButton(tr("Animated Button"), this);
    QPropertyAnimation *anim = new QPropertyAnimation(button, "pos", this);
    anim->setDuration(10000);
    anim->setStartValue(QPoint(0, 0));
    anim->setEndValue(QPoint(100, 250));
    anim->start();
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MyButtonWidget buttonAnimWidget;
    buttonAnimWidget.resize(QSize(800, 600));
    buttonAnimWidget.show();
    return a.exec();
}