Qt/C++ - Підручник 086. Використання QSequentialAnimationGroup і QPropertyAnimation для переміщення кнопки

QSequentialAnimationGroup, cpp, Qt, C++, QPropertyAnimation

Напишемо невеликий приклад програми, в якій пересуватиметься кнопка за допомогою анімацій властивостей. Для цього скористаємося класами QSequentialAnimationGroup та QPropertyAnimation .

QSequentialAnimationGroup є класом, що об'єднує кілька анімацій в одну групу, що дозволяє автоматично запускати одну анімацію, коли завершилася попередня QPropertyAnimation.

Анімація запускатиметься натисканням кнопки і ця сама кнопка пересуватиметься у вікні так, як показано на зображенні.

Проект створимо за замовчуванням у Qt Creator, а всі зміни стосуватимуться тільки класу Widget. Додасть кнопку QPushButton через графічний дизайнер.

Widget.h

А ось і сам приклад у коді

#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

Важливим моментом є те, що ми створюємо QPropertyAnimation із зазначенням тієї властивості, яку потрібно анімувати. В даному випадку це "geometry" . Властивість можна анімувати, якщо вона оголошена у класі як Q_PROPERTY. Тоді виконується плавна зміна значень цієї властивості.

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

Висновок

Таким чином можна налаштувати різну анімацію для властивостей об'єкта, які позначені макросом Q_PROPERTY і мають методи set і get.

Посилання на репозиторій Git