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();
}

[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.