應(yīng)用場景

在開發(fā)桌面應(yīng)用的時候，經(jīng)常性的會在幾個界面之間切換
可以是局部的，也可以是整個界面
以前我總是利用hide和show來完成
但是很缺乏動態(tài)的美感，用戶在使用的時候體驗不好
今天就來解決這個問題

---

下面進入正題：
QPropertyAnimation
在QT中使用這個類可以很容易的設(shè)置一般的動畫

淡入淡出

    QPropertyAnimation *animation = new QPropertyAnimation(&w,"windowOpacity");    animation->setDuration(1000);    animation->setStartValue(0);    animation->setEndValue(1);    animation->start();

上面這段代碼首先綁定一個widget，這個動畫將接收widget的圖形部分
然后設(shè)置整個動畫的時長為1000ms
setStartValue和setEndValue這里設(shè)置了從0到1
效果就是談入
start以后開始慢慢的出現(xiàn)
當(dāng)然也可以設(shè)置從1到0，效果自然就是淡出了
效果是這樣的

界面平移

    QLabel *label = new QLabel(this);    label->resize(this->centralWidget()->size());    label->setPixmap(this->centralWidget()->grab());    label->show();    QPropertyAnimation *animation= new QPropertyAnimation(label,"geometry");    animation->setDuration(1000);    animation->setStartValue(this->centralWidget()->geometry());    animation->setEndValue(QRect(-this->centralWidget()->width(), 0, this->centralWidget()->width(), this->centralWidget()->height()));    animation->start();

上面的代碼和淡入淡出不同
我使用了一個label來獲取整個界面的的大小和圖像
然后使用QPropertyAnimation 綁定
重點來了，這次我在setStartValue和setEndValue的時候不是一般的整數(shù)，而是使用的整個集合圖形QRect
關(guān)于QRect簡單介紹下
QRect用來表示一個矩形的位置和大小
具體地說就是一個QPoint（左上角的點）、寬度和高度
有了這幾個參數(shù)，這個矩形的位置和大小就統(tǒng)一了
下圖來自官方文檔

所以我們實際上我們setStartValue和setEndValue了一個矩形的位置和大小
這樣，如果我們的大小不變，只改變QPoint的橫坐標(biāo)，那么平移的效果就出來了
如下圖，向左側(cè)移動

向上或者向下也是可以的

上面兩種情況是這個界面移走，下個界面不動
那么我想讓這個界面移走的時候下個界面不是不動，而是跟著移動進來呢？
那么我們就得同時擁有兩個動畫：

1. 移出動畫
2. 移入動畫
   而且要動作一致才會有好的效果

    QLabel *label = new QLabel(this);    label->resize(this->centralWidget()->size());    label->setPixmap(this->centralWidget()->grab());    label->show();    QPropertyAnimation *animation= new QPropertyAnimation(label,"geometry");    animation->setDuration(500);    animation->setStartValue(this->centralWidget()->geometry());    animation->setEndValue(QRect(this->centralWidget()->width(), 0, this->centralWidget()->width(), this->centralWidget()->height()));    QPropertyAnimation *animation1= new QPropertyAnimation(this->centralWidget(),"geometry");    animation1->setDuration(500);    animation1->setStartValue(QRect(-this->centralWidget()->width(), 0, this->centralWidget()->width(), this->centralWidget()->height()));    animation1->setEndValue(this->centralWidget()->geometry());    QParallelAnimationGroup *group = new QParallelAnimationGroup;    group->addAnimation(animation);    group->addAnimation(animation1);    group->start();

在上面我們使用了QParallelAnimationGroup 這個類
它就像容器一樣可以裝載很多個動畫，然后同時讓它們開始
達(dá)到的效果就是這樣的：

QPropertyAnimation 同時還支持線性插值操作

animation->setKeyValueAt(0, QRect(0, 0, 00, 00));  animation->setKeyValueAt(0.4, QRect(20, 250, 20, 30));  animation->setKeyValueAt(0.8, QRect(100, 250, 20, 30));  animation->setKeyValueAt(1, QRect(250, 250, 100, 30));  animation->setEndValue(QRect(250, 250, 100, 30)); 

動畫會在前40%由QRect(0, 0, 00, 00）移動改變到QRect(20, 250, 20, 30)
然后再40%由QRect(20, 250, 20, 30)移動改變到QRect(100, 250, 20, 30)
最后到QRect(250, 250, 100, 30)
是不是很方便？

回彈效果

QEasingCurve 類還提供了很多種線性插值，下面是使用方法

    animation->setStartValue(this->centralWidget()->geometry());    animation->setEndValue(QRect(-this->centralWidget()->width(), 0, this->centralWidget()->width(), this->centralWidget()->height()));    animation->setEasingCurve(QEasingCurve::OutBounce);    animation->start();

下圖就是OutBounce的線性插值，會有一個回彈的效果

是不是很棒？還有很多的值可以一一試驗，下面是官方文檔截圖

---

源碼已經(jīng)上傳，基于QT 5.5.1

點擊下載