QPushButton Icon Animation

[cic1988]

Hello,

is there anyone who could give me some hints how can i do the rotate animation of the icon in pushbutton?
like waiting, etc.

i search some mostly they are implemented with qml.
what i would like to have is however a qpushbutton.

thank you

[aamer4yu]

You can inherit the QPushButton and override the paintEvent ,,,
You will also need a timer or better use QVariantAnimation to update the drawing on your widget .
Hope you get the idea

[cic1988]

You can inherit the QPushButton and override the paintEvent ,,,
You will also need a timer or better use QVariantAnimation to update the drawing on your widget .
Hope you get the idea

Hello, thanks for ur suggestion.

i have tried the idea and it works. The only drawback ive found is that the icon looks blured during animation.
i post my test code here, hope anyone could point it out where is the problem.

void LineEditButton::setRotationEnable(bool enable)
{
    if (enable) {
        m_animator = new QPropertyAnimation(this);
        m_animator->setTargetObject(this);
        m_animator->setStartValue(0);
        m_animator->setEndValue(360);
        m_animator->setDuration(2000);
 
        m_animator->start();
        connect(m_animator, SIGNAL(valueChanged(const QVariant&)), SLOT(update()));
        connect(m_animator, SIGNAL(finished()), m_animator, SLOT(start()));
    }
    else {
        m_animator->stop();
        delete m_animator;
        m_animator = NULL;
    }
}
 
void LineEditButton::paintEvent(QPaintEvent* event)
{
    Q_UNUSED(event);
 
    QStyleOptionButton option;
    initStyleOption(&option);
 
    static QIcon s_emptyIcon;
 
    // draw rest of button
    QStylePainter p(this);
    const QPixmap& pixmap = option.icon.pixmap(16, 16, isEnabled() ? QIcon::Disabled : QIcon::Normal);
    option.icon = s_emptyIcon;
    p.drawControl(QStyle::CE_PushButton, option);
    p.save();
 
    // rotate
    QRect pixmapRect = style()->itemPixmapRect(rect(), Qt::AlignCenter, pixmap);
    p.translate(pixmapRect.center());
    p.rotate(m_animator ? m_animator->currentValue().toInt() : 0);
    p.drawPixmap(QRect(-8, -8, 16, 16), pixmap);
    p.restore();
}

void LineEditButton::setRotationEnable(bool enable)
{
    if (enable) {
        m_animator = new QPropertyAnimation(this);
        m_animator->setTargetObject(this);
        m_animator->setStartValue(0);
        m_animator->setEndValue(360);
        m_animator->setDuration(2000);

        m_animator->start();
        connect(m_animator, SIGNAL(valueChanged(const QVariant&)), SLOT(update()));
        connect(m_animator, SIGNAL(finished()), m_animator, SLOT(start()));
    }
    else {
        m_animator->stop();
        delete m_animator;
        m_animator = NULL;
    }
}

void LineEditButton::paintEvent(QPaintEvent* event)
{
    Q_UNUSED(event);

    QStyleOptionButton option;
    initStyleOption(&option);

    static QIcon s_emptyIcon;

    // draw rest of button
    QStylePainter p(this);
    const QPixmap& pixmap = option.icon.pixmap(16, 16, isEnabled() ? QIcon::Disabled : QIcon::Normal);
    option.icon = s_emptyIcon;
    p.drawControl(QStyle::CE_PushButton, option);
    p.save();

    // rotate
    QRect pixmapRect = style()->itemPixmapRect(rect(), Qt::AlignCenter, pixmap);
    p.translate(pixmapRect.center());
    p.rotate(m_animator ? m_animator->currentValue().toInt() : 0);
    p.drawPixmap(QRect(-8, -8, 16, 16), pixmap);
    p.restore();
}

To copy to clipboard, switch view to plain text mode 

[wysota]

If you start rotating an icon which is 16x16 then you will be getting artifacts which you describe as "blur". I suggest to minimize the number of rotations. A human eye sees the animation as fluent at about 16 frames per second. So instead of animating 360 frames during 2 seconds which is larger than your monitor can show anyway, animate 30 frames during those 2 seconds. For each frame the icon will be rotated 12 degrees further.