Qt 動畫快速入門（一）

Qt-4.6動畫Animation快速入門三字決


Qt-4.6新增了Animation Framework(動畫框架),讓我們能夠方便的寫一些生動的程序。不必像以前的版本一樣，所有的控件都枯燥的呆在偉大光榮的QLayout里，也許它們可以唱個歌，跳個舞。
    所謂動畫就是在一個時間段內的不同時間點有不同的狀態，只要定義好這樣狀態，實現動畫就是水到渠成的事情。當然做這件事情，最好用的就是狀態機，沒錯Qt-4.6.0提供了QStateMachine類，不過今天我要講的三字決要簡單一些。

第一決:QPropertyAnimation

QPropertyAnimation用於和QObject中的屬性properties進行通信，比如QWidget的大小，坐標等。來看代碼

QPropertyAnimation *animation = new QPropertyAnimation(myWidget, “geometry”);
animation->setDuration(10000);
animation->setStartValue(QRect(0, 0, 100, 30));
animation->setEndValue(QRect(250, 250, 100, 30));
animation->start();

第一行創建的QPropertyAnimation對象關聯了myWidget這個窗體的幾何屬性。后面的幾句分別設置了這個動畫的時長，起始坐標和結束坐標。剩下的事情就交改QProperAnimation去做就行了。然后調用start()啟動它。沒錯，五行代碼就完成了一個完成了一個自動從一個坐標點移動到另一個坐標點的窗體。下面我給出一個可以運行的代碼,是一只小鳥從下角移到中間的一個小動畫，當然你得自己准備這個同名的圖片:)

復制代碼

1. #include <QApplication>
2. #include <QLabel>
3. #include <QPixmap>
4. #include <QPropertyAnimation>
6. int main(int argc,char *argv[]){
7.     QApplication app(argc,argv);
8.     QWidget *w=new QWidget();
9.     w->resize(300,400);
10.     QPixmap birdimg=QPixmap(”twitter-bird.png”).scaled(40,40);
11.     QLabel *bird_1=new QLabel(w);
12.     bird_1->setPixmap(birdimg);
13.     QPropertyAnimation *anim1=new QPropertyAnimation(bird_1, “pos”);
14.     anim1->setDuration(2000);
15.     anim1->setStartValue(QPoint(0, 360));
16.     anim1->setEndValue(QPoint(110, 180));
17.     anim1->start();
18.     bird_1->move(-40,-40);
19.     w->show();
20.     return app.exec();
21. }

上面的例子使用了label的位置屬性pos。當然你可以在自己的類里增加其它property的，比如讓顏色在變。

第二決:setEasingCurve

上面那個例子中小鳥的移動是線性的，未免太單調了點。QPropertyAnimation中的void setEasingCurve (const QEasingCurve & easing)函數正是用於實現不同的曲率變化的，QEasingCurve可用的參數列表(包括函數曲線圖)可在文檔中查到 。將上面動畫相關的代碼部分改成

QPropertyAnimation *anim1=new QPropertyAnimation(bird_1, “pos”);
anim1->setDuration(2000);
anim1->setStartValue(QPoint(0, 360));
anim1->setEndValue(QPoint(110, 180));
anim1->setEasingCurve(QEasingCurve::OutBounce);
anim1->start();

注意，新增的第四句。並且試試其它曲線參數，然后運行，看到的動態效果是不是不一樣了。如果你對列表里已經有的曲線都不滿意，你還可以繼承QEasingCurve，實現你需要的效果。

第三決:QAnimationGroup

前面的例子是只有一個動畫在運行，如果想多個動畫一起運行的話，那就要用到動畫組QAnimationGroup了。動畫組分為兩種分別為串行和並行，對應於QAnimationGroup的兩個子類QSequentialAnimationGroup和QParallelAnimationGroup。其用法很簡單

QSequentialAnimationGroup group;
//QParallelAnimationGroup group;
group.addAnimation(anim1);
group.addAnimation(anim2);
group.start();

上面的代碼，如果是串行的話，那么動畫anim1運行之后，才會運行anim2。如果是並行的話，兩個動畫是同時運行的。如果加了動畫組，那么單個anim1->start()就沒必要再單獨調用了，由動畫組來管理。 下面是一個可運行的代碼，兩只小鳥分別從窗體左上角和右下角移動到中間。

復制代碼

1. #include <QApplication>
2. #include <QWidget>
3. #include <QLabel>
4. #include <QPixmap>
5. #include <QPropertyAnimation>
6. #include <QSequentialAnimationGroup>
7. #include <QParallelAnimationGroup>
9. int main(int argc,char *argv[]){
10.     QApplication app(argc,argv);
11.     QWidget *w=new QWidget();
12.     w->resize(300,400);
13.     QPixmap birdimg=QPixmap(”twitter-bird.png”).scaled(40,40);
14.     QLabel *bird_1=new QLabel(w);
15.     bird_1->setPixmap(birdimg);
16.     QPropertyAnimation *anim1=new QPropertyAnimation(bird_1, “pos”);
17.     anim1->setDuration(2000);
18.     anim1->setStartValue(QPoint(0, 360));
19.     anim1->setEndValue(QPoint(110, 180));
20.     //anim1->setEasingCurve(QEasingCurve::OutBounce);
21.     anim1->start();
22.     QLabel *bird_2=new QLabel(w);
23.     bird_2->setPixmap(birdimg);
24.     QPropertyAnimation *anim2=new QPropertyAnimation(bird_2, “pos”);
25.     anim2->setDuration(2000);
26.     anim2->setStartValue(QPoint(0, 0));
27.     anim2->setEndValue(QPoint(150, 180));
28.     anim2->setEasingCurve(QEasingCurve::OutBounce);
29.     QSequentialAnimationGroup group;
30.     //QParallelAnimationGroup group;
31.     group.addAnimation(anim1);
32.     group.addAnimation(anim2);
33.     group.start();
34.     bird_1->move(-40,-40);
35.     bird_2->move(-40,-40);
36.     w->show();
37.     return app.exec();
38. }

文章的源在:http://docs.google.com/View?id=dhhvrcmh_100m5xs7wf3,如有更新可能會反映在那邊

http://www.qtcn.org/bbs/read-htm-tid-34061.html