码迷,mamicode.com
首页 > 其他好文 > 详细

qt动画入门

时间:2014-09-04 00:11:46      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:qt   动画   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>
    #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。其 用法很简单
引用
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/

qt动画入门

标签:qt   动画   animation   状态机   

原文地址:http://blog.csdn.net/haozhao_blog/article/details/39037731

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!