QT动画介绍

最新推荐文章于 2024-07-11 23:28:59 发布

itjobtxq

最新推荐文章于 2024-07-11 23:28:59 发布

阅读量1.2k

点赞数

分类专栏： QT

QT 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

所谓动画就是在一个时间段内的不同时间点有不同的状态，只要定义好这样状态，实现动画就是水到渠成的事情.当然做这件事情,最好用的就是状态机,点击这里查看Qt使用状态机实现动画效果实例。不过，实现动画也有更简单的方法，Qt提供了QStateMachine类，应用该类可以快速的实现动画效果。 Qt动画三字诀：

第一决: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()启动它。没错，五行代码就完成了一个完成了一个自动从一个坐标点移动到另一个坐标点的窗体。下面我给出一个可以运行的代码,是一只小鸟从左下角移到右下角的一个小动画:

 
        #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可用的参数列表(包括函数曲线图)可在文档中查到。将上面动画相关的代码部分改成:

 
        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。其用法很简单:

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

上面的代码，如果是串行的话，那么动画anim1运行之后，才会运行anim2。如果是并行的话，两个动画是同时运行的。如果加了动画组，那么单个anim1->start()就没必要再单独调用了，由动画组来管理。下面是一个可运行的代码，演示一只小鸟和一头猪依次从客户区飞过：

 
        #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(); 
       
        }