Le cadre d'animation

Le cadre d'animation offre un moyen simple d'animer vos éléments d'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 offertes par le framework sont également disponibles dans le module Qt Quickoù il est possible de définir des animations de manière déclarative.

Cette vue d'ensemble explique l'architecture du cadre, avec des exemples qui démontrent les techniques courantes utilisées pour animer QObject et les éléments de l'interface graphique.

L'architecture de l'animation

Le diagramme suivant montre les classes les plus importantes fournies par le framework :

Il inclut la classe QAbstractAnimation, qui fournit la base nécessaire aux animations. Cette classe définit les propriétés génériques de toutes les animations prises en charge par le cadre. 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 cadre fournit également les classes QVariantAnimation et QAnimationGroup, qui s'appuient sur leur cas de base, QAbstractAnimation. La classe suivante dans la hiérarchie est QPropertyAnimation, qui est dérivée de QVariantAnimation, et vous permet d'animer une propriété Qtgets d'un widget ou QObject. La classe effectue une interpolation sur la valeur de la propriété à l'aide d'une courbe d'assouplissement. Avec ces éléments en place, vous avez juste besoin d'une classe QObject avec une valeur de propriété Qt que vous pouvez animer.

Les animations complexes peuvent être construites en construisant une structure arborescente de QAbstractAnimations, où l'arbre est un QAnimationGroup qui contient d'autres animations. Ces groupes d'animation peuvent également contenir des sous-groupes représentant différents groupes ou animations, tels que QParallelAnimationGroup et QSequentialAnimationGroup.

En coulisses, toutes les animations sont contrôlées par un minuteur global, qui envoie à updates des informations sur toutes les animations en cours d'exécution.

Pour obtenir des informations détaillées sur ces classes individuelles et leur rôle dans le cadre, reportez-vous à leur documentation.

Classes proposées par le framework

Ces classes fournissent l'infrastructure nécessaire pour créer des animations simples et complexes.

Animer les propriétés Qt

Comme la classe QPropertyAnimation peut interpoler les propriétés Qt, elle est souvent utilisée. En fait, sa superclasse -QVariantAnimation- fournit une implémentation abstraite de updateCurrentValue(), qui ne change aucune valeur à moins que vous ne la changiez sur 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 une page QGraphicsView- possède des propriétés pour ses limites, ses couleurs, etc. L'exemple suivant montre comment vous pouvez 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é pos Qt Positioning d'un QPushButton, pour le déplacer du coin supérieur gauche de l'écran à la position finale (250, 250), en 10 secondes (10000 millisecondes).

Il utilise la méthode d'interpolation linéaire pour contrôler la vitesse d'animation entre les valeurs de départ et d'arrivée. Essayez d'ajouter une autre valeur entre les valeurs de début et de fin pour voir comment elles sont interpolées. Cette fois, 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 et le ramène à sa position initiale dans les 2 secondes restantes. Le mouvement du bouton est interpolé linéairement entre ces points.

Vous pouvez également animer une valeur de QObject qui n'est pas déclarée comme une propriété Qt, si la valeur a une méthode setter. Dans ce cas, dérivez une nouvelle classe à partir de la classe qui contient la valeur et 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, MyGraphicsRectItem dérive de QGraphicsRectItem et QObject et définit la propriété pos. Vous pouvez animer l'élément pos 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, reportez-vous à la section Système de propriétés de Qt.

Animations et cadre de visualisation graphique

QPropertyAnimation peut également être utilisé pour animer un QGraphicsItem, qui n'hérite pas de QObject. Dans ce cas, vous devez dériver une classe de l'élément graphique que vous souhaitez animer. Cette classe dérivée doit également hériter de la forme QObject pour permettre l'utilisation de QPropertyAnimation sur 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 des méta-objets l'exige.

Adoucir les courbes

Un site QPropertyAnimation effectue une interpolation linéaire entre les valeurs de début et de fin de la propriété. Outre l'ajout de valeurs clés à l'animation, vous pouvez également choisir une courbe d'assouplissement pour contrôler la vitesse d'interpolation entre 0 et 1, sans modifier la trajectoire.

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 le site button comme une balle. QEasingCurve offre une large collection de courbes à choisir dans l'énumération QEasingCurve::Type. Si vous souhaitez utiliser une courbe qui n'est pas disponible, implantez-en une vous-même et enregistrez-la auprès de QEasingCurve.

Regroupement d'animations

Une application contient souvent plus d'une animation. Par exemple, elle souhaite déplacer plusieurs éléments graphiques simultanément ou les déplacer l'un après l'autre.

Les sous-classes de QAnimationGroup-QSequentialAnimationGroup et QParallelAnimationGroup- sont des conteneurs pour d'autres animations de sorte que ces animations peuvent être animées en séquence ou en parallèle. Le site QAnimationGroup n'anime pas les propriétés, mais il est informé périodiquement des changements d'heure. Cela lui permet de transmettre ces changements d'heure aux groupes d'animation, qui contrôlent le moment où leurs animations sont jouées.

Les deux exemples suivants illustrent l'utilisation de QSequentialAnimationGroup et 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 joue plus d'une animation 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 QSequentialAnimationGroup joue ses animations dans l'ordre. Il démarre l'animation suivante dans la liste une fois que la précédente est terminée.

Un groupe est une animation en soi, vous pouvez donc l'ajouter à un autre groupe. De cette manière, vous construisez un arbre d'animation qui définit quand les animations sont jouées les unes par rapport aux autres.

Propriété des objets

Un objet QPropertyAnimation doit toujours avoir un parent qui contrôle sa durée de vie. Une application typique peut comprendre plusieurs animations regroupées, le groupe d'animation étant propriétaire de ces animations. Un QPropertyAnimation indépendant doit se voir attribuer explicitement un parent qui contrôle sa durée de vie. Dans l'exemple suivant, vous pouvez voir qu'un QPropertyAnimation indépendant a l'instance QApplication comme parent :

#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();
}