qt - Qt でカスタム ウィジェットを表示するときのトランジション効果

Question

カスタム ウィジェットを段階的に表示したいと思います。たとえば、不透明度 0 から始まり、一定時間内に 100 になります。この目的のために開発された簡単なQtの方法でそれを行うことは可能ですか? それとも自分でやってもいいですか？

乾杯、

Answer 1

このようなもののために正確に作成されたを使用するQGraphicsOpacityEffectと、より簡単に使用できます。QPropertyAnimationあなたがする必要があるのは、QGraphicsOpacityEffectあなたのQWidget子孫に をアタッチし、それを新しく作成された のターゲットとして設定し、希望するオプションQPropertyAnimationで実行することだけです!QPropertyAnimation

Answer 2

ショー イベントでウィジェットの不透明度を徐々に調整するタイマーの使用を試みることができます。この例を見てください（急いで書かれています）：

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

QWidgetがウィンドウの場合は、次を使用できます。

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

そうしないと：

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

最も簡単な方法は、このターゲットにQMLを使用することです。

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