qt - 在 Qt 中显示自定义小部件时的过渡效果

Question

我想逐步显示一个自定义小部件，例如从 0 不透明度开始并在给定时间内达到 100。是否有可能以为此目的开发的简单 Qt 方式来做到这一点？或者我可以自己做吗？

干杯，

Answer 1

QGraphicsOpacityEffect使用with会更简单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
        }
    }
}