qt动画入门

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>
   
   #include <QLabel>
   
   #include <QPixmap>
   
   #include <QPropertyAnimation>
   
   
   
   int main(int argc,char *argv[]){
   
       QApplication app(argc,argv);
   
       QWidget *w=new QWidget();
   
       w->resize(300,400);
   
       QPixmap birdimg=QPixmap(”twitter-bird.png”).scaled(40,40);
   
       QLabel *bird_1=new QLabel(w);
   
       bird_1->setPixmap(birdimg);
   
       QPropertyAnimation *anim1=new QPropertyAnimation(bird_1, “pos”);
   
       anim1->setDuration(2000);
   
       anim1->setStartValue(QPoint(0, 360));
   
       anim1->setEndValue(QPoint(110, 180));
   
       anim1->start();
   
       bird_1->move(-40,-40);
   
       w->show();
   
       return app.exec();
   
   }

上面的样例使用了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。

其 使用方法非常easy

引用

QSequentialAnimationGroup group;

//QParallelAnimationGroup group;

group.addAnimation(anim1);

group.addAnimation(anim2);

group.start();

上 面的代码，假设是串行的话，那么动画anim1执行之后，才会执行anim2。

假设是并行的话，两个动画是同一时候执行的。假设加了动画组，那么单个 anim1->start()就不是必需再单独调用了，由动画组来管理。 以下是一个可执行的代码，两仅仅小鸟分别从窗口左上角和右下角移动到中间。

复制代码

1. #include <QApplication>
   
   #include <QWidget>
   
   #include <QLabel>
   
   #include <QPixmap>
   
   #include <QPropertyAnimation>
   
   #include <QSequentialAnimationGroup>
   
   #include <QParallelAnimationGroup>
   
   
   
   int main(int argc,char *argv[]){
   
       QApplication app(argc,argv);
   
       QWidget *w=new QWidget();
   
       w->resize(300,400);
   
       QPixmap birdimg=QPixmap(”twitter-bird.png”).scaled(40,40);
   
       QLabel *bird_1=new QLabel(w);
   
       bird_1->setPixmap(birdimg);
   
       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();
   
       QLabel *bird_2=new QLabel(w);
   
       bird_2->setPixmap(birdimg);
   
       QPropertyAnimation *anim2=new QPropertyAnimation(bird_2, “pos”);
   
       anim2->setDuration(2000);
   
       anim2->setStartValue(QPoint(0, 0));
   
       anim2->setEndValue(QPoint(150, 180));
   
       anim2->setEasingCurve(QEasingCurve::OutBounce);
   
       QSequentialAnimationGroup group;
   
       //QParallelAnimationGroup group;
   
       group.addAnimation(anim1);
   
       group.addAnimation(anim2);
   
       group.start();
   
       bird_1->move(-40,-40);
   
       bird_2->move(-40,-40);
   
       w->show();
   
       return app.exec();
   
   }

转自http://blog.163.com/benben_long/blog/static/1994582432012312105857888/