Weird behaviour of QWiget after running QPropertyAnimation - c++

Question

I'm running the next animation on two widgets:
QParallelAnimationGroup* animGroup = new QParallelAnimationGroup;
for (int i = 0; i < 2; ++i) {
//widgets is an array of 2 QLabels
QPropertyAnimation* anim = new QPropertyAnimation(widgets[i], "geometry");
anim->setDuration(750);
anim->setStartValue(widgets[i]->geometry());
widgets[i]->setProperty("animating", true);
qDebug() << QString("Animation Start %1: ").arg(widgets[i]->objectName()) << widgets[i]->pos() << " g " << widgets[i]->geometry();
//
anim->setEndValue(widgets[!i]->geometry());
anim->setEasingCurve(QEasingCurve::OutBack);
animGroup->addAnimation(anim);
}
animGroup->start(QAbstractAnimation::DeleteWhenStopped);
So far so good, animation moves both widgets as expected, but as soon as I resize the window, those widgets get automatically moved back to their original position. The current layout holding this both widgets is a QHBoxLayout, and has the following items (same order):
QLabel0 | QSpacerItem0 | QToolTipButton | QSpacerItem1 | QLabel1
after the animation they become:
QLabel1 | QSpacerItem0 | QToolTipButton | QSpacerItem1 | QLabel0
But whenever I change the size of the window the position on the widgets resets to the original layout. I haven't implemented the resizeEvent from my window.
I'm using Windows 10 with Visual Studio | Qt Visual Studio Tools 2.3.1 and Qt 12.0, building with msvc2017_64 version and c++17 enabled.
Complete Test Code (New project):
SwapItemsTest.cpp
#include "SwapItemsTest.h"
#include <array>
#include <QHBoxLayout>
#include <QToolButton>
#include <QSpacerItem>
#include <QLabel>
#include <QDebug>
#include <QParallelAnimationGroup>
#include <QPropertyAnimation>
#include <QTimer>
SwapItemsTest::SwapItemsTest(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
auto layout = new QHBoxLayout;
auto toolButton = new QToolButton;
auto left = new QLabel("Left");
left->setFixedSize(50, size().height());
left->setFrameShape(QFrame::Box);
left->setFrameShadow(QFrame::Plain);
left->setLineWidth(2);
left->setAlignment(Qt::AlignCenter);
auto right = new QLabel("Right");
right->setFixedSize(50, size().height());
right->setAlignment(Qt::AlignCenter);
right->setFrameShape(QFrame::Box);
right->setFrameShadow(QFrame::Plain);
right->setLineWidth(2);
layout->addWidget(left);
layout->addSpacerItem(new QSpacerItem(40, 40));
layout->addWidget(toolButton);
layout->addSpacerItem(new QSpacerItem(40, 40));
layout->addWidget(right);
ui.centralWidget->setLayout(layout);
auto widgets = std::array{left, right};
connect(toolButton, &QToolButton::clicked, [widgets]() {
QParallelAnimationGroup* animGroup = new QParallelAnimationGroup;
for (int i = 0; i < 2; ++i) {
//widgets is an array of 2 QLabels
QPropertyAnimation* anim = new QPropertyAnimation(widgets[i], "geometry");
anim->setDuration(750);
anim->setStartValue(widgets[i]->geometry());
widgets[i]->setProperty("animating", true);
anim->setEndValue(widgets[!i]->geometry());
anim->setEasingCurve(QEasingCurve::OutBack);
animGroup->addAnimation(anim);
}
animGroup->start(QAbstractAnimation::DeleteWhenStopped);
});
}
SwapItemsTest.h
#pragma once
#include <QtWidgets/QMainWindow>
#include "ui_SwapItemsTest.h"
class SwapItemsTest : public QMainWindow
{
Q_OBJECT
public:
SwapItemsTest(QWidget *parent = Q_NULLPTR);
private:
Ui::SwapItemsTestClass ui;
};

Answer 1

The problem is that you place the widgets in a layout but then try to manage their geometry yourself. One workaround would be to update the layout once the animation group has finished by swapping the two widgets. Your code then becomes...
SwapItemsTest::SwapItemsTest(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
auto layout = new QHBoxLayout;
auto toolButton = new QToolButton;
auto left = new QLabel("Left");
left->setFixedSize(50, size().height());
left->setFrameShape(QFrame::Box);
left->setFrameShadow(QFrame::Plain);
left->setLineWidth(2);
left->setAlignment(Qt::AlignCenter);
auto right = new QLabel("Right");
right->setFixedSize(50, size().height());
right->setAlignment(Qt::AlignCenter);
right->setFrameShape(QFrame::Box);
right->setFrameShadow(QFrame::Plain);
right->setLineWidth(2);
layout->addWidget(left);
layout->addSpacerItem(new QSpacerItem(40, 40));
layout->addWidget(toolButton);
layout->addSpacerItem(new QSpacerItem(40, 40));
layout->addWidget(right);
ui.centralWidget->setLayout(layout);
auto widgets = std::array{left, right};
connect(toolButton, &QToolButton::clicked,
/*
* Note that layout has been added to the capture list for this lambda.
*/
[layout, widgets]()
{
QParallelAnimationGroup* animGroup = new QParallelAnimationGroup;
for (int i = 0; i < 2; ++i) {
//widgets is an array of 2 QLabels
QPropertyAnimation* anim = new QPropertyAnimation(widgets[i], "geometry");
anim->setDuration(750);
anim->setStartValue(widgets[i]->geometry());
widgets[i]->setProperty("animating", true);
anim->setEndValue(widgets[!i]->geometry());
anim->setEasingCurve(QEasingCurve::OutBack);
animGroup->addAnimation(anim);
}
/*
* This is the lambda that will be invoked when the
* QPropertyAnimation::finished signal is emitted. It simply
* swaps the positions of the two widgets in the layout.
*/
connect(animGroup, &QPropertyAnimation::finished,
[layout, widgets]()
{
auto index0 = layout->indexOf(widgets[0]);
auto index1 = layout->indexOf(widgets[1]);
if (index0 < index1) {
layout->takeAt(index1);
layout->takeAt(index0);
layout->insertWidget(index0, widgets[1]);
layout->insertWidget(index1, widgets[0]);
} else {
layout->takeAt(index0);
layout->takeAt(index1);
layout->insertWidget(index1, widgets[0]);
layout->insertWidget(index0, widgets[1]);
}
});
animGroup->start(QAbstractAnimation::DeleteWhenStopped);
});
}
Note that you might still see some strange behaviour if the parent widget is resized during the animation.