Qt-4.6动画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>
  2. #include <QLabel>
  3. #include <QPixmap>
  4. #include <QPropertyAnimation>
  5. int main(int argc,char *argv[]){
  6. QApplication app(argc,argv);
  7. QWidget *w=new QWidget();
  8. w->resize(300,400);
  9. QPixmap birdimg=QPixmap(”twitter-bird.png”).scaled(40,40);
  10. QLabel *bird_1=new QLabel(w);
  11. bird_1->setPixmap(birdimg);
  12. QPropertyAnimation *anim1=new QPropertyAnimation(bird_1, “pos”);
  13. anim1->setDuration(2000);
  14. anim1->setStartValue(QPoint(0, 360));
  15. anim1->setEndValue(QPoint(110, 180));
  16. anim1->start();
  17. bird_1->move(-40,-40);
  18. w->show();
  19. return app.exec();
  20. }

上面的例子使用了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>
  2. #include <QWidget>
  3. #include <QLabel>
  4. #include <QPixmap>
  5. #include <QPropertyAnimation>
  6. #include <QSequentialAnimationGroup>
  7. #include <QParallelAnimationGroup>
  8. int main(int argc,char *argv[]){
  9. QApplication app(argc,argv);
  10. QWidget *w=new QWidget();
  11. w->resize(300,400);
  12. QPixmap birdimg=QPixmap(”twitter-bird.png”).scaled(40,40);
  13. QLabel *bird_1=new QLabel(w);
  14. bird_1->setPixmap(birdimg);
  15. QPropertyAnimation *anim1=new QPropertyAnimation(bird_1, “pos”);
  16. anim1->setDuration(2000);
  17. anim1->setStartValue(QPoint(0, 360));
  18. anim1->setEndValue(QPoint(110, 180));
  19. //anim1->setEasingCurve(QEasingCurve::OutBounce);
  20. anim1->start();
  21. QLabel *bird_2=new QLabel(w);
  22. bird_2->setPixmap(birdimg);
  23. QPropertyAnimation *anim2=new QPropertyAnimation(bird_2, “pos”);
  24. anim2->setDuration(2000);
  25. anim2->setStartValue(QPoint(0, 0));
  26. anim2->setEndValue(QPoint(150, 180));
  27. anim2->setEasingCurve(QEasingCurve::OutBounce);
  28. QSequentialAnimationGroup group;
  29. //QParallelAnimationGroup group;
  30. group.addAnimation(anim1);
  31. group.addAnimation(anim2);
  32. group.start();
  33. bird_1->move(-40,-40);
  34. bird_2->move(-40,-40);
  35. w->show();
  36. return app.exec();
  37. }

文章的源在:http://docs.google.com/View?id=dhhvrcmh_100m5xs7wf3,如有更新可能会反映在那边

http://www.qtcn.org/bbs/read-htm-tid-34061.html

Qt 动画快速入门(一)的更多相关文章

  1. [Qt Creator 快速入门] 第5章 应用程序主窗口

    对于日常见到的应用程序而言,许多都是基于主窗口的,主窗口中包含了菜单栏.工具栏.状态栏和中心区域等.这一章会详细介绍主窗口的每一个部分,还会涉及资源管理.富文本处理.拖放操作和文档打印等相关内容.重点 ...

  2. [Qt Creator 快速入门] 第2章 Qt程序编译和源码详解

    一.编写 Hello World Gui程序 Hello World程序就是让应用程序显示"Hello World"字符串.这是最简单的应用,但却包含了一个应用程序的基本要素,所以 ...

  3. [Qt Creator 快速入门] 第1章 Qt Creator简介

    Qt Creator 是一个跨平台的.完整的 Qt 集成开发环境,其中包括了高级C++代码编辑器.项目和生成管理工具.集成的上下文相关的帮助系统.图形化调试器.代码管理和浏览工具等.这一章先对 Qt ...

  4. Expression Blend实例中文教程(10) - 缓冲动画快速入门Easing

    随着Rich Internet application(RIA)应用技术的发展,各个公司越来越注重于项目的用户体验性,在保证其功能完善,运行稳定的基础上,绚丽的UI和人性化的操作设计会给用户带来舒适的 ...

  5. [Qt Creator 快速入门] 第0篇 开始学习Qt 与Qt Creator

    Qt官方信息 Qt官网:http://qt.digia.com/ Qt开源官网:http://qt-project.org/ Qt最新版本下载:http://qt-project.org/downlo ...

  6. QT Creator 快速入门教程 读书笔记(一)

    一 Qt简介 Qt 是一个跨平台的C++应用程序框架,支持Windows.Linux.Mac OS X.Android.iOS.Windows Phone.嵌入式系统等.也就是说,Qt 可以同时支持桌 ...

  7. 《QT Creator快速入门》

    ui中的类,这样使用无法通过调试: Ui::Dialog ui(&w); w.show(); 而需要改成: Ui::Dialog ui; ui.setupUi(&w); w.show( ...

  8. QT Creator 快速入门教程 读书笔记(二)

    一 窗口部件 基础窗口部件QWidget类是所有用户界面对象的基类,窗口和控件都是直接或间接继承自 QWidget,下面我们来看一个很简单的例子: 窗口部件(Widget)简称部件,是QT中建立界面的 ...

  9. QT Creator 快速入门教程 读书笔记(三)

    一   信号和槽 GUI 程序除了要绘制控件,还要响应系统和用户事件,例如重绘.绘制完成.点击鼠标.敲击键盘等.当事件发生时,UI 会产生相应的变化,让用户直观地看到. 大部分编程(例如Win SDK ...

随机推荐

  1. javascript优化--13模式1(DOM和浏览器模式)

    注意分离: 通过将CSS关闭来测试页面是否仍然可用,内容是否依然可读: 将JavaScript关闭来测试页面仍然可以执行正常功能:所有连接是否正常工作:所有的表单是否可以正常工作: 不使用内联处理器( ...

  2. 海贼王之——梦想音乐

      相信和很多海粉一样,对伙伴的关照和战斗,是相当地震撼.   好东西时不时地听一下,然后感受那种刷新全身表层细胞,触电...:   音乐链接: http://v.youku.com/v_show/i ...

  3. 【wikioi】1012 最大公约数和最小公倍数问题

    题目链接 算法:辗转相除(欧几里得) gcd(a, b)是a和b最小公倍数, lcm(a, b)是a和b的最大公倍数 gcd(a, b) == gcd(b, a%b) 时间复杂度: O(lgb) 具体 ...

  4. 【wikioi】1690 开关灯(线段树)

    http://wikioi.com/problem/1690/ 这题可不能算是水题了.. 在线段树中,我只想到了lazy改变,但是没想到lazy变后size怎么变,我的策略变成了lazy为0时size ...

  5. JavaScript_判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAg ...

  6. 用javascript协助导入图片

    用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...

  7. virt-manage图形界面键盘错位问题

    键盘错乱问题: 启动引导问题:

  8. 在Copy-Item中集成认证信息以拷贝文件

    $source = "c:\XXX.XXX" $pw = ConvertTo-SecureString '密码' -AsPlainText -Force $Creds = New- ...

  9. vi用法

  10. Scrum会议1

    小组名称:天天向上 项目名称:连连看 参会成员:王森(Master)张金生 张政 栾骄阳 时间:2016.10.16 会议内容: 1.连连看游戏选取图片素材. 2.连连看的界面设计 3.连连看具体的功 ...