QPropertyAnimation- 淡入淡出並且大小轉換同時動畫

在應用中,有時候會有這樣一種效果,就是某一個按鍵按下去之後,會彈出一個帶有多個按鍵的界面。這個動畫效果,經常是淡入淡出和界面轉換同時運行。在QT中,也可以實現。

這裏參考的網絡例子是:https://www.jianshu.com/p/0050eae56929

還是先上結果好了,點擊start按鍵後,開始動畫。

這裏比較簡要,所以只上主函數的代碼即可:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPropertyAnimation>
#include <QParallelAnimationGroup>
#include <QSequentialAnimationGroup>
#include <QGraphicsOpacityEffect>
#include <QDebug>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //scale
    //初始化透明效果
    QGraphicsOpacityEffect *pButtonOpacity = new QGraphicsOpacityEffect(this);
    pButtonOpacity->setOpacity(1);
    ui->scaleButton->setGraphicsEffect(pButtonOpacity);

    //大小變化動畫
    pScaleAnimation1 = new QPropertyAnimation(ui->scaleButton, "geometry");
    pScaleAnimation1->setDuration(1000);
    pScaleAnimation1->setStartValue(QRect(70, 110, 0, 0));
    pScaleAnimation1->setEndValue(QRect(70, 110, 140, 140));
    pScaleAnimation1->setEasingCurve(QEasingCurve::InOutQuad);

    //透明度變化動畫
    pOpacityAnimation1 = new QPropertyAnimation(pButtonOpacity, "opacity");
    pOpacityAnimation1->setDuration(1000);
    pOpacityAnimation1->setStartValue(0);
    pOpacityAnimation1->setEndValue(1);
}

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

void MainWindow::on_startButton_clicked()
{
    static bool Flag = 0;
    if(Flag)
    {
        //設置動畫方向
        pScaleAnimation1->setDirection(QAbstractAnimation::Forward);
        pOpacityAnimation1->setDirection(QAbstractAnimation::Forward);
        //動畫同時開始
        pScaleAnimation1->start();
        pOpacityAnimation1->start();
        Flag = 0;
    }
    else
    {
        pScaleAnimation1->setDirection(QAbstractAnimation::Backward);
        pOpacityAnimation1->setDirection(QAbstractAnimation::Backward);
        pScaleAnimation1->start();
        pOpacityAnimation1->start();
        Flag = 1;
    }
}


void MainWindow::on_scaleButton_clicked()
{
    qDebug()<<"click";
}

 

發佈了109 篇原創文章 · 獲贊 39 · 訪問量 51萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章