Frame Size Extention Animation

[IknowQT]

I want to change the side frame size variably using the toggle button, and I implemented it as a set Fixed Size, but when the size changes, I want to give an animation effect.

What can I do? I'll attach a rough code.

########################### Header ###########################

#pragma once

#include <QWidget>
#include "ui_WToggleMenu.h"

#include <qpropertyanimation.h>
#include <qpainter.h>
#include <qstyleoption.h>

class WToggleMenu : public QWidget
{
	Q_OBJECT
		Q_PROPERTY(int ExtendPage READ ExtendPage WRITE SetExtendPage)


public:
	WToggleMenu(QWidget *parent = Q_NULLPTR);
	~WToggleMenu();

private:
	Ui::WToggleMenu		ui;
	int					m_nWidth;
	int					m_nOriWidth;
	QPropertyAnimation* m_pAniaction;

public:
	void	ToggleLayout();
	int		ExtendPage();
	void	SetExtendPage(int nExtend);

public slots:
	void BtnToggle();

protected:
	//void paintEvent(QPaintEvent*) override;

};

########################### CPP ############################

#include "WToggleMenu.h"

WToggleMenu::WToggleMenu(QWidget *parent)
	: QWidget(parent)
{
	ui.setupUi(this);

	this->connect(this->ui.btn_toggle, &QPushButton::clicked, this, &WToggleMenu::BtnToggle);
	m_nOriWidth = this->ui.frame_left_menu->width();
	m_nWidth = m_nOriWidth;

	ToggleLayout();
}

WToggleMenu::~WToggleMenu()
{
}

void WToggleMenu::ToggleLayout()
{
	m_pAniaction = new QPropertyAnimation(this, "ExtendPage", this);
	m_pAniaction->setEasingCurve(QEasingCurve::OutBounce);
	m_pAniaction->setDuration(500);

	SetExtendPage(300);
}

int WToggleMenu::ExtendPage()
{
	return m_nWidth;
}

void WToggleMenu::SetExtendPage(int nExt)
{
	m_nWidth = nExt;
	this->update();
}

//void WToggleMenu::paintEvent(QPaintEvent*)
//{
//	QPainter painter(this);
//	QStyleOption opt;
//	opt.initFrom(this);
//	style()->drawPrimitive(QStyle::PE_Widget, &opt, &painter, this);
//}

void WToggleMenu::BtnToggle()
{
	m_pAniaction->stop();

	if (this->ui.btn_toggle->isChecked())
	{
		this->ui.frame_left_menu->setFixedWidth(m_nWidth);
		m_pAniaction->setEndValue(m_nWidth);
	}
	else
	{
		this->ui.frame_left_menu->setFixedWidth(m_nOriWidth);
		m_pAniaction->setEndValue(m_nOriWidth);
	}
	m_pAniaction->start();
}

[jsulm]

@IknowQT said in Frame Size Extention Animation:

What can I do?

You can read documentation: https://doc.qt.io/qt-5/animation-overview.html
You did not specify start and end value for the animation.

[IknowQT]

@jsulm

void WToggleMenu::BtnToggle()
{
	bool bToggle = this->ui.btn_toggle->isChecked();
	if (bToggle)
		m_nWidth = 300;
	else 
		m_nWidth = 80;

	int nWidth = this->ui.frame_left_menu->width();
	auto anim = new QPropertyAnimation(this, "minimumWidth", this);
	anim->setDuration(250);
	anim->setStartValue(80);
	anim->setEndValue(300);
	anim->setDirection(bToggle ? QAbstractAnimation::Forward : QAbstractAnimation::Backward);
	anim->setEasingCurve(bToggle ? QEasingCurve::OutCubic : QEasingCurve::InCubic);
	anim->start(QAbstractAnimation::DeleteWhenStopped);
}

void WToggleMenu::paintEvent(QPaintEvent*)
{
	/*QPainter painter(this);
	QStyleOption opt;
	opt.initFrom(this);
	style()->drawPrimitive(QStyle::PE_Widget, &opt, &painter, this);*/

	bool bToggle = this->ui.btn_toggle->isChecked();

	if( bToggle )
		this->ui.frame_left_menu->setFixedWidth(300);
	else 
		this->ui.frame_left_menu->setFixedWidth(80);

}

Even if you run it like this, the animation effect doesn't come out.

How do you know and express the control that is the subject of the animation effect?

[jsulm]

@IknowQT said in Frame Size Extention Animation:

How do you know and express the control that is the subject of the animation effect?

Not sure what this means. First parameter in the QPropertyAnimation constructor specifies the widget to animate, second specifies the name of the property of that widget to animate.
Why do you want to animate minimumWidth? Wouldn't it make more sense to animate https://doc.qt.io/qt-5/qwidget.html#width-prop?