Transition effect when showing a custom widget in Qt

Question

I would like to progressively show a custom widget, something like beginning with 0 opacity and going to 100 in a given time. Is it possible to do it in a easy Qt way developed for this purpose? Or may I do it by myself?

Cheers,

Answer 1

It would be simpler to use QGraphicsOpacityEffect with QPropertyAnimation, which was made exactly for stuff like this. All you need to do is to attach your QGraphicsOpacityEffect to your QWidget descendant then set it up as the target for a newly created QPropertyAnimation and run QPropertyAnimation with your desired options!

Answer 2

You can try to use a timer which will gradually adjust the opacity of your widget on show events. Take this example (written in a hurry) :

class MyWidget: public QWidget{
public:
    MyWidget(QWidget* parent) : QWidget(parent){
       //setup the timer first
       timer.setInterval(xxx);
       connect(&timer, SIGNAL(timeOut()),this, SLOT(increaseOpacity()));
    };

protected:
    virtual void MyWidget::showEvent ( QShowEvent * event ){
        opacity = 0;
        setOpacity(opacity);
        QWidget::showEvent(event);
        timer.start();
    }

    virtual void MyWidget::hideEvent ( QHideEvent * event ){
        QWidget::hideEvent(event);
        timer.stop();
    }

private slot:
    void increaseOpacity(){
        if(opacity>=1.0){
           timer.stop();
        }
        opacity += 0.1;
        setOpacity(opacity);
    }
private:
   Qtimer timer;
   double opacity; 

}

Answer 3

If you QWidget is window you can just use:

#include <QApplication>
#include <QWidget>
#include <QPropertyAnimation>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWidget w;
    w.show();

    QPropertyAnimation animation(&w, "windowOpacity");
    animation.setDuration(10000);
    animation.setStartValue(1.0);
    animation.setEndValue(0.0);

    animation.start();

    return a.exec();
}

Else:

#include <QApplication>
#include <QWidget>
#include <QPropertyAnimation>
#include <QGraphicsOpacityEffect>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWidget w;
    QPushButton b(&w);
    w.show();

    QGraphicsOpacityEffect effect;
    b.setGraphicsEffect(&effect);

    QPropertyAnimation animation(&effect, "opacity");
    animation.setDuration(1000);
    animation.setStartValue(1.0);
    animation.setEndValue(0.0);

    animation.start();

    return a.exec();
}

Best easy way is use QML for this target:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        width: 100
        height: 100
        color: "red"

        NumberAnimation on opacity {
            from: 1.0; to: 0.0
            duration: 5000
        }
    }
}