Qt動畫效果展示

      在上一篇博文【Qt動畫框架--原創翻譯】中，我給大家原創翻譯了Qt動畫框架並且有文字和代碼以及圖片共同描述；今天在這篇博文中，主要實踐Qt動畫，做一個實例來講解Qt動畫使用，其界面如下圖所示(由於沒有錄制為gif動畫圖片，所以請各位下載查看效果)：

      該程序使用應用程序單窗口，主窗口繼承於QMainWindow；主窗口有5個QToolButton部件（窗口底部的四個以及窗口中央的一個），單擊窗口底部的QToolButton部件可以使窗口中央的那個QToolButton有動畫效果；具體效果請自己嘗試。

1、生成部件以及定位部件
      在主窗口的構造函數中生成部件對象，然后在窗口大小改變事件中定位部件位置，如下代碼所示：

//生成ToolButton
m_pBtn1 = new QToolButton(this);
//窗口大小改變事件
void MainWindow::resizeEvent(QResizeEvent *event)
{
    m_pBtn1->move(0,height()-h_widget);
    m_pBtn2->move(w_widget+space_widget,height()-h_widget);
    m_pBtn3->move(width()-w_widget*2-space_widget,height()-h_widget);
    m_pBtn4->move(width()-w_widget,height()-h_widget);
    //m_pBtnAnima居中
    m_pBtnAnima->move(width()/2-w_widget/2,height()/2-h_widget/2);
    QMainWindow::resizeEvent(event);
}

2、繪制窗口背景
      該窗口背景是線性漸變的，即窗口左上是白色的，一直漸變到窗口右下的黑色，因此使用Qt的線性漸變畫刷；Qt中有三種漸變效果，分別是：線性漸變，圓形漸變和錐形漸變。

//重繪事件
void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    //畫漸變背景--線性漸變
    QLinearGradient objLinear(rect().topLeft(),rect().bottomRight());
    objLinear.setColorAt(0,Qt::white);
    objLinear.setColorAt(1,Qt::black);
    painter.fillRect(rect(),objLinear);
}

3、QToolButton顯示圖像
      主要使用setmask函數來生成掩碼位圖，從而過濾掉不在圖像之中的部分。

pBtn->setStyleSheet("QToolButton{border:0px;}");
pBtn->resize(w_widget,h_widget);
pBtn->setIconSize(QSize(w_widget,h_widget));
QPixmap objPixmap(str);
pBtn->setIcon(QIcon(objPixmap));
pBtn->setMask(objPixmap.mask());

4、設置窗口中央的那個QToolButton動畫
      當然主要使用QPropertyAnimation對象了，看下面的幾行代碼，很簡單；主要設置持續時間，然后設置QToolButton在開始處和結束處的幾何信息即可，最后設置動畫效果即可；Qt內置了很多的動畫效果供我們選擇。

//槽函數--動畫設置
void MainWindow::SetAnimation(int nCurveType)
{
    //如果狀態為Running，則停止動畫
    if(m_pProAnima->state()==QPropertyAnimation::Running)
    {
        m_pProAnima->stop();
    }
    //設置新的動畫
    m_pProAnima->setDuration(1000);
    m_pProAnima->setStartValue(QRect(0, 0, w_widget, h_widget)); 
    m_pProAnima->setEndValue(QRect(width()-w_widget,height()-h_widget*2,w_widget,h_widget));
    m_pProAnima->setEasingCurve(QEasingCurve::Type(nCurveType));
    m_pProAnima->start();
}

      SetAnimation(int nCurveType)的參數表示哪一種動畫效果，因為單擊窗口底部的四個QToolButton分別實現不同的動畫效果，但是QToolButton的clicked信號是無參數的，那么怎么標識是哪一個傳來的了，這就要使用QSignalMapper類了，使用這個類可以對信號進行傳遞以及參數附加，附加的參數可以是integer, string or widget parameters and QObject。

m_pSignalMapper = new QSignalMapper(this);
connect(m_pBtn1, SIGNAL(clicked()), m_pSignalMapper, SLOT(map()));
m_pSignalMapper->setMapping(m_pBtn1, QEasingCurve::OutInQuad);
connect(m_pSignalMapper, SIGNAL(mapped(int)),this, SLOT(SetAnimation(int)));

      我把源碼共享出來，點此下載源碼