Animating image replacement in Qt

Question

I'm trying to animate the change of a QPixmap, inside QLabel.

I have MainWindow which holds several objects that derive from QScrollArea. Each of these holds a QLabel member.

Using mousePressEvent() I am able to replace the picture of each QLabel using setPixmap(). However, that simply switches the image in each QLabel, while what I would like to achieve is an animation where a new image slides over the existing one.

First I tried using a QTimeLine to draw the QPixmap on the QLabel myself (I've created a class that derives from QLabel for that, and wrote my own setPixmap()) but that didn't work. Next I tried using QPropertyAnimation but it can't construct on a Pixmap without me implementing a sub class for that as well.

Any thoughts or ideas are appreciated.

Dan Milburn Dan Milburn · Accepted Answer · 2011-09-20T07:27:35

You will need a QObject with a property that can be animated, and generates the intermediate frames for the animation. An incomplete example:

class LabelAnimator : public QObject
{
    Q_OBJECT
    Q_PROPERTY(float progress READ progress WRITE setProgress)
public:
    LabelAnimator(QLabel* label) : mProgress(0.0f), 
                                   mLabel(label), 
                                   mAnimation(new QPropertyAnimation(this, "progress", this) 
    {
        mAnimation->setStartValue(0.0f);
        mAnimation->setEndValue(1.0f);
    }
    void setProgress(float progress) { 
        mProgress = progress;
        QPixmap pix = mOriginalPixmap;
        int offset = - mLabel->width() * (1.0f-progress);
        QPainter painter(&pix);
        painter.paint(off, 0, mNewPixmap);
        painter.end();
        mLabel->setPixmap(pix);
    }
    void setPixmap(const QPixmap& pix) {
        mOriginalPixmap = mLabel->pixmap();
        mNewPixmap = pix;
        mAnimation->start();
    }
};

Animating image replacement in Qt

2 Answers