Qt-4.6动画Animation快速入门三字决

　前面写过一篇文章Qt动画效果的幕后英雄:QTimeLine,介绍了怎么利用QTimeLine写一动画程序。今天又再重申前文里的一句话，所谓动画 就是在一个时间段内的不同时间点有不同的状态，只要定义好这样状态，实现动画就是水到渠成的事情。当然做这件事情，最好用的就是状态机，没错Qt- 4.6.0提供了QStateMachine类，不过今天我要讲的三字决要简单一些。

　　第一决:QPropertyAnimation

　　QPropertyAnimation用于和QObject中的属性properties进行通信，比如QWidget的大小，坐标等。来看代码

1 QPropertyAnimation * animation = new QPropertyAnimation(myWidget, “geometry”);
2
3 　　animation -> setDuration( 10000 );
4
5 　　animation -> setStartValue(QRect( 0 , 0 , 100 , 30 ));
6
7 　　animation -> setEndValue(QRect( 250 , 250 , 100 , 30 ));
8
9 　　animation -> start();
10
11

　 　　　第一行创建的QPropertyAnimation对象关联了myWidget这个窗体的几何属性。后面的几句分别设置了这个动画的时长，起始坐标 和结束坐标。剩下的事情就交改QProperAnimation去做就行了。然后调用start()启动它。没错，五行代码就完成了一个完成了一个自动从 一个坐标点移动到另一个坐标点的窗体。下面我给出一个可以运行的代码,是一只小鸟从下角移到中间的一个小动画，当然你得自己准备这个同名的图片

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

　　　上面的例子使用了label的位置属性pos。当然你可以在自己的类里增加其它property的，比如让颜色在变。

　　第二决:setEasingCurve

　 　上面那个例子中小鸟的移动是线性的，未免太单调了点。QPropertyAnimation中的void setEasingCurve (const QEasingCurve & easing)函数正是用于实现不同的曲率变化的，QEasingCurve可用的参数列表(包括函数曲线图)可在文档中查到 。将上面动画相关的代码部分改成

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

　　　　注意，新增的第四句。并且试试其它曲线参数，然后运行，看到的动态效果是不是不一样了。如果你对列表里已经有的曲线都不满意，你还可以继承QEasingCurve，实现你需要的效果。

　　第三决:QAnimationGroup

　 　前面的例子是只有一个动画在运行，如果想多个动画一起运行的话，那就要用到动画组QAnimationGroup了。动画组分为两种分别为串行和并行， 对应于QAnimationGroup的两个子类QSequentialAnimationGroup和 QParallelAnimationGroup。其用法很简单

　　QSequentialAnimationGroup group;

　　//QParallelAnimationGroup group;

　　group.addAnimation(anim1);

　　group.addAnimation(anim2);

　　group.start();

　 　上面的代码，如果是串行的话，那么动画anim1运行之后，才会运行anim2。如果是并行的话，两个动画是同时运行的。如果加了动画组，那么单个 anim1->start()就没必要再单独调用了，由动画组来管理。 下面是一个可运行的代码，两只小鸟分别从窗体左上角和右下角移动到中间。

1 　#include
2
3 　　#include
4
5 　　#include
6
7 　　#include
8
9 　　#include
10
11 　　#include
12
13 　　#include
14
15 　　 int main( int argc,char * argv[]){
16
17 　　QApplication app(argc,argv);
18
19 　　QWidget * w = new QWidget();
20
21 　　w -> resize( 300 , 400 );
22
23 　　QPixmap birdimg = QPixmap(”twitter - bird.png”).scaled( 40 , 40 );
24
25 　　QLabel * bird_1 = new QLabel(w);
26
27 　　bird_1 -> setPixmap(birdimg);
28
29 　　QPropertyAnimation * anim1 = new QPropertyAnimation(bird_1, “pos”);
30
31 　　anim1 -> setDuration( 2000 );
32
33 　　anim1 -> setStartValue(QPoint( 0 , 360 ));
34
35 　　anim1 -> setEndValue(QPoint( 110 , 180 ));
36
37 　　 // anim1 -> setEasingCurve(QEasingCurve::OutBounce);
38
39 　　anim1 -> start();
40
41 　　QLabel * bird_2 = new QLabel(w);
42
43 　　bird_2 -> setPixmap(birdimg);
44
45 　　QPropertyAnimation * anim2 = new QPropertyAnimation(bird_2, “pos”);
46
47 　　anim2 -> setDuration( 2000 );
48
49 　　anim2 -> setStartValue(QPoint( 0 , 0 ));
50
51 　　anim2 -> setEndValue(QPoint( 150 , 180 ));
52
53 　　anim2 -> setEasingCurve(QEasingCurve::OutBounce);
54
55 　　QSequentialAnimationGroup group;
56
57 　　 // QParallelAnimationGroup group;
58
59 　　group.addAnimation(anim1);
60
61 　　group.addAnimation(anim2);
62
63 　　group.start();
64
65 　　bird_1 -> move( - 40 , - 40 );
66
67 　　bird_2 -> move( - 40 , - 40 );
68
69 　　w -> show();
70
71 　　return app.exec();
72
73 　　}
74