Das Animations-Framework

Das Animations-Framework bietet eine einfache Möglichkeit, Ihre GUI-Elemente zu animieren. Es ermöglicht Ihnen, einen Qt-Eigenschaftswert eines Widgets oder eines „ QObject “ zu animieren. Die meisten Funktionen des Frameworks sind auch in Qt Quick, wo Animationen auf deklarative Weise definiert werden können.

Diese Übersicht erläutert die Architektur des Frameworks anhand von Beispielen, die gängige Techniken zur Animation v QObject s und von GUI-Elementen veranschaulichen.

Die Architektur des Animations-Frameworks

Das folgende Diagramm zeigt die wichtigsten vom Framework bereitgestellten Klassen:

Dazu gehört die Klasse „ QAbstractAnimation “, die die notwendige Grundlage für Animationen bildet. Diese Klasse definiert die generischen Eigenschaften für alle vom Framework unterstützten Animationen. Dazu gehört beispielsweise die Möglichkeit, eine Animation zu starten, zu stoppen und anzuhalten. Die Klasse empfängt zudem die Benachrichtigungen über Zeitänderungen.

Das Framework stellt darüber hinaus die Klassen „ QVariantAnimation “ und „ QAnimationGroup “ bereit, die auf ihrer Basisklasse „ QAbstractAnimation “ aufbauen. Als Nächstes in der Hierarchie folgt „ QPropertyAnimation “, die von „ QVariantAnimation “ abgeleitet ist und es Ihnen ermöglicht, eine Qt-Eigenschaft eines Widgets oder eines „ QObject “ zu animieren. Die Klasse führt eine Interpolation des Eigenschaftswerts unter Verwendung einer Easing-Kurve durch. Sobald diese vorhanden sind, benötigen Sie lediglich eine „ QObject “-Klasse mit einem Qt-Eigenschaftswert, den Sie animieren können.

Komplexe Animationen lassen sich durch den Aufbau einer Baumstruktur aus „ QAbstractAnimations“ erstellen, wobei der Baum eine „ QAnimationGroup “ ist, die andere Animationen enthält. Diese Animationsgruppen können auch Untergruppen enthalten, die verschiedene Gruppen oder Animationen repräsentieren, wie beispielsweise „ QParallelAnimationGroup “ und „ QSequentialAnimationGroup “.

Im Hintergrund werden alle Animationen von einem globalen Timer gesteuert, der „ updates “ über alle laufenden Animationen sendet.

Ausführliche Informationen zu diesen einzelnen Klassen und ihrer Rolle im Framework finden Sie in der jeweiligen Dokumentation.

Vom Framework bereitgestellte Klassen

Diese Klassen stellen die erforderliche Infrastruktur bereit, um sowohl einfache als auch komplexe Animationen zu erstellen.

Animieren von Qt-Eigenschaften

Da die Klasse „ QPropertyAnimation “ Interpolationen an Qt-Eigenschaften vornehmen kann, wird sie häufig verwendet. Tatsächlich bietet ihre Oberklasse – „QVariantAnimation“ – eine abstrakte Implementierung von ` updateCurrentValue()`, die keinen Wert ändert, es sei denn, Sie ändern ihn in der ` valueChanged signal`.

Das Framework ermöglicht es Ihnen, die Qt-Eigenschaften der in Qt vorhandenen Klassen zu animieren. Beispielsweise verfügt die Klasse „ QWidget “ – die in eine „ QGraphicsView“ eingebettet werden kann – über Eigenschaften für ihre Begrenzungen, Farben und so weiter. Das folgende Beispiel zeigt, wie Sie ein „ QPushButton “-Widget animieren können:

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

Das Beispiel animiert die Qt-Eigenschaft „ pos “ eines „ QPushButton “, um es innerhalb von 10 Sekunden (10.000 Millisekunden) von der oberen linken Ecke des Bildschirms zur Endposition (250, 250) zu bewegen.

Es verwendet die lineare Interpolationsmethode, um die Geschwindigkeit der Animation zwischen dem Start- und dem Endwert zu steuern. Fügen Sie einen weiteren Wert zwischen dem Start- und dem Endwert ein, um zu sehen, wie diese interpoliert werden. Verwenden Sie diesmal die Funktion „ QPropertyAnimation::setKeyValueAt()“, um diese Werte hinzuzufügen:

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

In diesem Beispiel bewegt die Animation die Schaltfläche in 8 Sekunden auf die Position (250, 250) und in den verbleibenden 2 Sekunden zurück auf ihre ursprüngliche Position. Die Bewegung der Schaltfläche wird zwischen diesen Punkten linear interpoliert.

Sie können auch den Wert eines ` QObject` animieren, der nicht als Qt-Eigenschaft deklariert ist, sofern der Wert über eine Setter-Methode verfügt. Leiten Sie in solchen Fällen eine neue Klasse von der Klasse ab, die den Wert enthält, und fügen Sie eine Qt-Eigenschaft für diesen Wert mit dem Setter hinzu.

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

In diesem Beispiel leitet sich die „ MyGraphicsRectItem “ von „ QGraphicsRectItem “ und „ QObject “ ab und definiert die Eigenschaft „ pos “. Sie können die „ pos “ des Elements animieren, auch wenn „ QGraphicsRectItem “ die Eigenschaft „ pos “ nicht bereitstellt.

Eine allgemeine Einführung in das Qt-Eigenschaftssystem finden Sie unter „Qt's Property System“.

Animationen und das Graphics View Framework

QPropertyAnimation kann auch verwendet werden, um ein ` QGraphicsItem` zu animieren, das ` QObject` nicht erbt. In solchen Fällen leiten Sie eine Klasse von dem Grafikobjekt ab, das Sie animieren möchten. Diese abgeleitete Klasse sollte ebenfalls von ` QObject ` erben, um die Verwendung von ` QPropertyAnimation ` auf einem ` QGraphicsItem` zu ermöglichen. Das folgende Beispiel zeigt, wie dies erfolgt:

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

Wie im vorherigen Abschnitt beschrieben, müssen Sie die Eigenschaften definieren, die Sie animieren möchten. Die abgeleitete Klasse muss zunächst von „ QObject “ erben, da dies vom Metobjekt-System gefordert wird.

Beschleunigungs- und Abbremskurven

Ein „ QPropertyAnimation “ führt eine lineare Interpolation zwischen den Start- und Endwerten der Eigenschaften durch. Zusätzlich zum Hinzufügen weiterer Schlüsselwerte zur Animation können Sie auch eine Beschleunigungskurve auswählen, um die Geschwindigkeit der Interpolation zwischen 0 und 1 zu steuern, ohne den Verlauf zu ändern.

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

In diesem Beispiel folgt die Animation einer Kurve, die den „ button “ wie einen Ball hüpfen lässt. „ QEasingCurve “ bietet eine große Auswahl an Kurven, die über die Enumeration „ QEasingCurve::Type “ ausgewählt werden können. Wenn Sie eine andere Kurve verwenden möchten, die nicht verfügbar ist, implementieren Sie diese selbst und registrieren Sie sie unter „ QEasingCurve “.

Gruppierung von Animationen

Eine Anwendung enthält oft mehr als eine Animation. Beispielsweise möchte sie mehrere Grafikelemente gleichzeitig bewegen oder sie nacheinander bewegen.

Die Unterklassen von ` QAnimationGroup` – `QSequentialAnimationGroup ` und ` QParallelAnimationGroup` – sind Container für andere Animationen, sodass diese Animationen entweder nacheinander oder parallel animiert werden können. Die Klasse ` QAnimationGroup ` animiert keine Eigenschaften, wird jedoch regelmäßig über Zeitänderungen benachrichtigt. Dadurch kann sie diese Zeitänderungen an die Animationsgruppen weiterleiten, die steuern, wann ihre Animationen abgespielt werden.

Die beiden folgenden Beispiele veranschaulichen die Verwendung von „ QSequentialAnimationGroup “ und „ 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();
}

Eine parallele Gruppe spielt mehr als eine Animation gleichzeitig ab. Ihre Funktion ` start()` startet alle Animationen, die Teil der Gruppe sind.

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

Wie der Name schon sagt, spielt eine „ QSequentialAnimationGroup “ ihre Animationen nacheinander ab. Sie startet die nächste Animation in der Liste, sobald die vorherige beendet ist.

Eine Gruppe ist selbst eine Animation, sodass man sie einer anderen Gruppe hinzufügen kann. Auf diese Weise lässt sich ein Animationsbaum aufbauen, der festlegt, wann die Animationen im Verhältnis zueinander abgespielt werden.

Objektverantwortung

Eine „ QPropertyAnimation “ sollte immer ein übergeordnetes Objekt haben, das ihre Lebensdauer steuert. Eine typische Anwendung kann mehrere Animationen enthalten, die gruppiert sind, wobei die Animationsgruppe die Eigentümerschaft über diese Animationen übernimmt. Einem unabhängigen „ QPropertyAnimation “ muss explizit ein übergeordnetes Objekt zugewiesen werden, um seine Lebensdauer zu steuern. Im folgenden Beispiel sehen Sie, dass ein unabhängiges „ QPropertyAnimation “ die Instanz „ QApplication “ als übergeordnetes Objekt hat:

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