CODEWITHSUNDEEP
qtqt4widgeteffectstransition
Didac Perez Parera
Didac Perez Parera

Reputation: 3814

Transition effect when showing a custom widget in Qt

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,

Upvotes: 1

Views: 3702

Answers (3)

Toosla
Toosla

Reputation: 106

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!

Upvotes: 8

synacker
synacker

Reputation: 1782

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
        }
    }
}

Upvotes: 1

UmNyobe
UmNyobe

Reputation: 22890

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;

}

Upvotes: 3

Related Questions