QT動畫介紹(有例子可以下載)


所謂動畫就是在一個時間段內的不同時間點有不同的狀態,只要定義好這樣狀態,實現動畫就是水到渠成的事情.當然做這件事情,最好用的就是狀態機,點擊這里查看Qt使用狀態機實現動畫效果實例。 不過,實現動畫也有更簡單的方法,Qt提供了QStateMachine類,應用該類可以快速的實現動畫效果。 Qt動畫三字訣:

第一決:QPropertyAnimation

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

1
2
3
4
5
6
7
8
9
10
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>
#include <QPixmap>
#include <QLabel>
int  main( int  argc, char  *argv[])
{
   QApplication app(argc,argv);
   QWidget *w= new  QWidget();
   w->resize(640,520);
 
   QPixmap birdimg=QPixmap( "bird.png" ).scaled(45,30);
   QLabel *bird= new  QLabel(w);
   bird->setPixmap(birdimg);
   /*
       也可以使用setText函數設置標簽顯示的文字
       bird->setText("Hello");
    */
   QPropertyAnimation *anim= new  QPropertyAnimation(bird, "pos" );
   anim->setDuration(3000);
   anim->setStartValue(QPoint(0, 520));
   anim->setEndValue(QPoint(580, 10));
   anim->start();
 
   w->show();
   return  app.exec();
}

上面的例子使用了label的位置屬性pos。當然你可以在自己的類里增加其它property的,比如讓顏色在變,可以點擊這里下載該代碼.

第二決:setEasingCurve

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

1
2
3
4
5
6
7
8
9
10
11
QPropertyAnimation *anim= new  QPropertyAnimation(bird, "pos" );
 
anim->setDuration(2000);
 
anim->setStartValue(QPoint(0,360));
 
anim->setEndValue(QPoint(110,180));
 
anim1->setEasingCurve(QEasingCurve::OutBounce);
 
anim1->start();

注意,新增的第四句。是使動畫效果變為彈跳效果,如果你對列表里已經有的曲線都不滿意,你還可以繼承QEasingCurve,實現你需要的效果。

第三決:QAnimationGroup

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

1
2
3
4
5
6
7
8
9
QSequentialAnimationGroup group;
 
//QParallelAnimationGroup group;
 
group.addAnimation(anim1);
 
group.addAnimation(anim2);
 
group.start();

上面的代碼,如果是串行的話,那么動畫anim1運行之后,才會運行anim2。如果是並行的話,兩個動畫是同時運行的。如果加了動畫組,那么單個anim1->start()就沒必要再單獨調用了,由動畫組來管理。 下面是一個可運行的代碼,演示一只小鳥和一頭豬依次從客戶區飛過:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#include<QApplication>
#include<QPixmap>
#include<QLabel>
#include<QPropertyAnimation>
#include<QSequentialAnimationGroup>
#include<QParallelAnimationGroup>
 
int  main( int  argc, char  *argv[])
{
   QApplication app(argc,argv);
   QWidget *w= new  QWidget();
   w->resize(900,600);
 
   QLabel *bird= new  QLabel(w);
   bird->setPixmap(QPixmap( "bird.png" ).scaled(40,40));
 
   QPropertyAnimation *bfly= new  QPropertyAnimation(bird, "pos" );
   bfly->setDuration(3000);
   bfly->setStartValue(QPoint(0, 560));
   bfly->setEndValue(QPoint(860, 0));
   bfly->setEasingCurve(QEasingCurve::CosineCurve);
 
   QLabel *pig= new  QLabel(w);
   pig->setPixmap(QPixmap( "pig.png" ).scaled(40,40));
 
   QPropertyAnimation *pfly= new  QPropertyAnimation(pig, "pos" );
   pfly->setDuration(3000);
   pfly->setStartValue(QPoint(0, 0));
   pfly->setEndValue(QPoint(860, 560));
   pfly->setEasingCurve(QEasingCurve::OutBounce);
 
   QSequentialAnimationGroup group;
   //QParallelAnimationGroup group;
   group.addAnimation(bfly);
   group.addAnimation(pfly);
   group.start();
 
   w->show();
   return  app.exec();
}

可以切換動畫組的類型,使動畫以並行方式運行.點擊這里下載該代碼.

http://blog.csdn.net/itjobtxq/article/details/8951665


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM