Unsolved Frame Size Extention Animation
-
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(); }
-
@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. -
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?
-
@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?