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 Repository Link