Qt/C++ - Tutorial 086. Verwenden von QSequentialAnimationGroup und QPropertyAnimation zum Verschieben einer Schaltfläche

QSequentialAnimationGroup, cpp, Qt, C++, QPropertyAnimation

Lassen Sie uns eine kleine Beispielanwendung schreiben, in der sich die Schaltfläche mithilfe von Eigenschaftsanimationen bewegt. Dazu verwenden wir die Klassen QSequentialAnimationGroup und QPropertyAnimation .

QSequentialAnimationGroup ist eine Klasse, die mehrere Animationen in einer Gruppe kombiniert, wodurch Sie automatisch eine Animation starten können, wenn die vorherige QPropertyAnimation. abgeschlossen ist

Die Animation beginnt, wenn auf die Schaltfläche geklickt wird, und dieselbe Schaltfläche bewegt sich im Fenster, wie im Bild gezeigt.

Wir erstellen das Projekt standardmäßig in Qt Creator, und alle Änderungen betreffen nur die Klasse Widget . Es ist erforderlich, die Schaltfläche QPushButton über den Grafikdesigner hinzuzufügen.

Widget.h

Und hier ist das Beispiel im Code

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

#include <QSequentialAnimationGroup>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void onClickButton();

private:
    Ui::Widget *ui;

    // Группа анимации для кнопки
    QSequentialAnimationGroup* animationGroup;
};

#endif // WIDGET_H

Widget.cpp

Der wichtige Punkt ist, dass wir eine QPropertyAnimation mit einer Angabe der Eigenschaft erstellen, die wir animieren möchten. In diesem Fall ist es "Geometrie" . Eine Eigenschaft kann animiert werden, wenn sie in der Klasse als Q_PROPERTY. deklariert wird. Dann wird eine sanfte Änderung der Werte dieser Eigenschaft durchgeführt.

#include "widget.h"
#include "ui_widget.h"

#include <QPropertyAnimation>
#include <QDebug>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    // Создадим группу анимации
    animationGroup = new QSequentialAnimationGroup(this);

    // Создадим анимацию свойства передвижения слева-сверху направо-сверху
    QPropertyAnimation* leftTopToRightTop = new QPropertyAnimation(ui->pushButton, "geometry");
    leftTopToRightTop->setDuration(1000); // Длительность анимации
    leftTopToRightTop->setStartValue(ui->pushButton->geometry()); // Стартовая позиция и геометрия анимации
    leftTopToRightTop->setEndValue(ui->pushButton->geometry().translated(100, 0)); // Конечная позиция и геометрия анимации
    animationGroup->addAnimation(leftTopToRightTop); // Добавим анимацию в группу

    // Справа-сверху вниз-справа
    QPropertyAnimation* rightTopToRightBottom = new QPropertyAnimation(ui->pushButton, "geometry");
    rightTopToRightBottom->setDuration(1000);
    rightTopToRightBottom->setStartValue(leftTopToRightTop->endValue());
    rightTopToRightBottom->setEndValue(leftTopToRightTop->endValue().toRect().translated(0, 100));
    animationGroup->addAnimation(rightTopToRightBottom);

    // Снизу-справа налево-вниз
    QPropertyAnimation* rightBottomToLeftBottom = new QPropertyAnimation(ui->pushButton, "geometry");
    rightBottomToLeftBottom->setDuration(1000);
    rightBottomToLeftBottom->setStartValue(rightTopToRightBottom->endValue());
    rightBottomToLeftBottom->setEndValue(rightTopToRightBottom->endValue().toRect().translated(-100, 0));
    animationGroup->addAnimation(rightBottomToLeftBottom);

    // Слева-снизу наверх-слева
    QPropertyAnimation* leftBottomToLeftTop = new QPropertyAnimation(ui->pushButton, "geometry");
    leftBottomToLeftTop->setDuration(1000);
    leftBottomToLeftTop->setStartValue(rightBottomToLeftBottom->endValue());
    leftBottomToLeftTop->setEndValue(rightBottomToLeftBottom->endValue().toRect().translated(0, -100));
    animationGroup->addAnimation(leftBottomToLeftTop);

    // Подключаем нажатие кнопки к слоту обработчику кнопки
    connect(ui->pushButton, &QPushButton::clicked, this, &Widget::onClickButton);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::onClickButton()
{
    // Запускаем анимацию
    animationGroup->start();
}

Fazit

So ist es möglich, eine Vielzahl von Animationen für Objekteigenschaften einzurichten, die mit dem Q_PROPERTY-Makro gekennzeichnet sind und über Set- und Get-Methoden verfügen.

Git-Repository-Link