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

引用

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/

时间: 2024-12-29 05:43:27

qt动画入门的相关文章

Qt动画窗口,Qt之对话框消失动画

在讲解代码之前,先来认识几个概念 QPropertyAnimation:属性动画,可以参考qt 窗口动画 QGraphicsOpacityEffect:窗口透明度设置类,继承自QGraphicsEffect QGraphicsDropShadowEffect:窗口阴影,继承自QGraphicsEffect QGraphicsBlurEffect:滤镜,继承自QGraphicsEffect QGraphicsColorizeEffect:着色,继承自QGraphicsEffect http://w

Qt动画与Qt坐标小记

Qt动画 转载自: <http://jingyan.baidu.com/article/154b46315757b628ca8f4116.html> 和  <http://blog.csdn.net/syzobelix/article/details/9377863> Qt动画架构中的主要类如下图所示: 动画框架由基类QAbstractAnimation和它的两个子类QVariantAnimation和QAnimationGroup组成. QAbstractAnimation是所有

详解Qt动画框架(2)--- 实现网易云音乐tag切换

在详解Qt的动画框架(一)介绍了关于Qt动画框架一些基础知识,在这一节中,将会实际的看到有关与动画框架的实现,该案例主要实现的具体是网易云音乐tag的切换,网易云音乐中的切换如图所示: 本文介绍的方法也可以达到这种切换的简易效果. 设计动画框架 首先我们需要设计对于动画框架,其需要的动画效果是什么?对于上图,我们需要的是三个tag可以不停的切换,可以抽象为左移以及右移,即一个tag从一个矩形区域,移动到另外的矩形区域,那么对于Tag的承载体选为什么较为合适呢?因为我们仅仅只需要图片的显示,因此Q

QT动画介绍(有例子可以下载)

所谓动画就是在一个时间段内的不同时间点有不同的状态,只要定义好这样状态,实现动画就是水到渠成的事情.当然做这件事情,最好用的就是状态机,点击这里查看Qt使用状态机实现动画效果实例. 不过,实现动画也有更简单的方法,Qt提供了QStateMachine类,应用该类可以快速的实现动画效果. Qt动画三字诀: 第一决:QPropertyAnimation QPropertyAnimation用于和QObject中的属性properties进行通信,比如QWidget的大小,位置坐标等.来看代码 1 2

Qt快速入门学习笔记(基础篇)

本文基于Qter开源社区论坛版主yafeilinux编写的<Qt快速入门系列教程目录>,网址:http://bbs.qter.org/forum.php?mod=viewthread&tid=193.参考书为基于该系列教程<Qt Creator快速入门>和<Qt及Qt Quick开发实战精解> 1.关联Qt库.如果是分别安装的Qt Creator和Qt库,而不是安装集成Qt Creator和Qt库的SDK,则需要手动关联Qt库.打开工具→选项菜单,然后选择“构建

转 iOS Core Animation 动画 入门学习(一)基础

iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514 在iOS中,每个view中都自动配置了一个layer,我们不能人为新建,而在Mac OS中,view默认是没有

Qt动画架构中的主要类

Qt动画架构中的主要类如下图所示: 动画框架由基类QAbstractAnimation和它的两个儿子QVariantAnimation和QAnimationGroup组成.QAbstractAnimation是所有动画类的祖宗.它包含了所有动画的基本属性.比如开始,停止和暂停一个动画的能力.它也可以接收时间改变通知. 动画框架又进一步提供了QProertyAnimation类.它继承自QVariantAnimation并对某个Qt属性(它须是Qt的"元数据对象系统"的一部分,见http

Qt快速入门系列教程目录

Qt快速入门系列教程目录

cocos creator学习--骨骼动画入门教程

参考:Mark_Liu--cocos creator--DragonBones 骨骼动画入门 1.首先在网上下载dragonBones 的文件解压后有三个文件 2.将文件夹放入cocos creator, 3.新建一个空结点并添加渲染组件dragonBones,新建一个js文件,将js文件和节点绑定.将资源的两个json文件放入dragonBones对应的框中 4.查看SwordsMan的json文件,搜索  gotoAndPlay  ,该关键字对应的就是动作名称 5.打开js文件,写入代码 c