QPropertyAnimation - Qt widget 淡入淡出效果（一）

在嵌入式設備裏，當QT界面需要切換的時候，往往需要很多動態效果。例如根據觸摸，動態左右切換屏幕，或則是點一個按鍵，做界面淡入淡出效果等。這裏會整合網絡上的一些資源，做幾種特效。這一篇先給一個淡入淡出的示例。

參考資料：http://serge45-blog.logdown.com/posts/208655-qt-widget-fade-effect

大神的代碼完整實現了淡入淡出，但是作爲初學者，也爲了工程效果，在大神的代碼上做了適當的增減。例如：

1. 在紅色控件的背後，加了一個pushbutton，實現紅色控件淡出，當紅色控件隱藏後，pushbutton因此可以按。

2.當按下觸發的pushbutton後，實現紅色控件顯示，並且實現淡入效果。

3.增加了動畫完成之後的函數，實現控制紅色控件淡出效果完成後，隱藏自己。

這是最終實現的gif效果。

mainwondow.h代碼如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QAbstractAnimation>
#include <QGraphicsOpacityEffect>
#include <QPropertyAnimation>

#define QT_NO_OPENGL //i.mx6ull不支持opengl

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_demoButton_clicked();
    void on_animation_stateChanged(QAbstractAnimation::State newState,
                                   QAbstractAnimation::State oldState);
    void on_animation_finished(void);

    void on_pushButton_clicked();

private:
    Ui::MainWindow *ui;
    QGraphicsOpacityEffect  *redOpacity;
    QPropertyAnimation      *redAnimation;
    int                     animationDuration;
};

#endif // MAINWINDOW_H

mainwindow.c

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow),
    redOpacity(nullptr),
    animationDuration(1000)
{
    ui->setupUi(this);
    redOpacity = new QGraphicsOpacityEffect(ui->redWidget);
    ui->redWidget->setGraphicsEffect(redOpacity);
    redOpacity->setOpacity(1);

    redAnimation = new QPropertyAnimation(redOpacity, "opacity", this);
    redAnimation->setStartValue(1);
    redAnimation->setEndValue(0);
    redAnimation->setDuration(animationDuration);
    redAnimation->setEasingCurve(QEasingCurve::Linear);

    connect(redAnimation, SIGNAL(stateChanged(QAbstractAnimation::State,QAbstractAnimation::State)),
            this, SLOT(on_animation_stateChanged(QAbstractAnimation::State,QAbstractAnimation::State))
            );

    connect(redAnimation, SIGNAL(finished()),this, SLOT(on_animation_finished()));
}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::on_demoButton_clicked() {

    if (redAnimation->state() != QAbstractAnimation::Stopped) {
        redAnimation->pause();
    }

    redAnimation->start();
}

void MainWindow::on_animation_stateChanged(QAbstractAnimation::State newState,
                                       QAbstractAnimation::State oldState) {

    if (newState != QAbstractAnimation::Running) {
        if (redAnimation->direction() == QAbstractAnimation::Forward) {
            redAnimation->setDirection(QAbstractAnimation::Backward);
        } else {
            redAnimation->setDirection(QAbstractAnimation::Forward);
        }
    }

}

void MainWindow::on_animation_finished(void)
{
    if(redAnimation->direction() == QAbstractAnimation::Backward)
    {
        ui->redWidget->hide();
    }
}

void MainWindow::on_pushButton_clicked()
{
    on_demoButton_clicked();
    if(ui->redWidget->isHidden())//如果控件隱藏，則顯示出來
    {
        ui->redWidget->show();
    }
}