项目背景:主要是想做一个AGV调度仿真软件,第一阶段先完成小车的运动先。所以需要学习一下QT的动画效果,为整个软件打下基础,

动画框架是由基类QAbstractAnimation和它的两个派生类QVariantAnimation、QAnimaitonGroup组成的。动画框架进一步提供了QProPertyAnimation类用于单个控件属性的变化,QAnimationGroup用于多动画的类。这篇文章主要讲解单个动画的实现。

在Qt Creator新建Qt Widgets Application,选择以QWidget为基础类。

接下来的代码在widget.cpp中的Widget函数实现。

QPropertyAnimation

property是属性,animation是动画,所以这个类是专门用于控制控件属性的动画。QPropertyAnimation类继承QVariantAnimation类,能够修改Qt的属性值,如pos、geometry等属性。而动画的控件必须是QObject类的派生类,其实大部分控件都是QObject的派生类。我们可以通过指定属性的初始值和终值,比如初始的大小和结束的大小,初始的位置和结束的位置,初始的颜色和结束的颜色等。如果未指定初始值,属性就会被设定为生成控件实例时那个值。

头文件

前两个是工程建好就有的,第三个是为了新建按钮,第四个是为了新建动画。

坐标系

以下表示位置的坐标系定义如下图所示。

实现动画的简单步骤

1.实例化QPropertyAnimation对象。
2.绑定要实现动画的对象,该对象要继承于QObject父类。
3.设置要进行变化的属性,尺寸、位置‘颜色等。
4.设置属性的起始值和终止值。
5.设置动画运行时长。
6.启动动画。
下面的示例都具有这六个步骤。而实例化对象、绑定对象、设置属性有两种方式进行操作。
第一种方式是直接通过构造函数一步到位,如下图所示。
第二种方式是分开进行,如下图所示。先实例化对象命名为Anima,然后通过setTargetObject函数和setPropertyName函数进行后两步。quit是一个创建好指向按钮的指针。

缩放

通过修改控件的geometry属性可以实现缩放效果,也可以实现位移的动画,该属性的前两个值确定了控件左上角的位置,后两个值确定了控件的大小。必须用QRcet来表示,有两种表示方式。我们选择第一种。

前面创建了一个QPushButton对象,用于动画的演示效果。setDuration设定的是动画的时间。

位移

如果只是需要位移动画的话,修改控件的pos属性即可。pos属性就是控件的左上角所在的位置。QPoint表示的是某一个点。

动画速度曲线

动画运动的速度曲线是可以更改的,默认是匀速运动。通过其成员函数setEasingCurve函数可以实现更改速度曲线的功能。在说明手册可以看到曲线的取值有哪些。

Anima->setEasingCurve(QEasingCurve::InOutQuad);


第一个Linear是默认的线性运动,速度是保持一定的。第二个InQuad曲线是二次函数曲线。下面还有很多,我就不列举了。可以通过一下方式查看曲线的取值。
鼠标放在函数处,按键盘上的F1;

再按一下红色框部分,就可以跳转到曲线介绍那里。

演示

通过信号与槽机制,建立按键与动画之间的联动关系,实现演示效果。代码如下:

#include "widget.h"
#include "ui_widget.h"#include <QPushButton>
#include <QPropertyAnimation>
#include <QMessageBox>QPropertyAnimation *Anima = new QPropertyAnimation;
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//定义一个按键QPushButton *button1 = new QPushButton("缩放",this);//将点击信号关联到槽函数connect(button1,SIGNAL(pressed()),this,SLOT(suofang()));button1->setGeometry(20,20,100,40);QPushButton *button2 = new QPushButton("位移(默认曲线)",this);connect(button2,SIGNAL(pressed()),this,SLOT(ChangePos()));button2->setGeometry(130,20,100,40);QPushButton *button3 = new QPushButton("位移(Cubic曲线)",this);connect(button3,SIGNAL(pressed()),this,SLOT(ChangePos2()));button3->setGeometry(240,20,100,40);QPushButton *quit= new QPushButton("A",this);quit->setGeometry(10,200,30,30);Anima->setTargetObject(quit);}Widget::~Widget()
{delete ui;
}void Widget::suofang()
{Anima->setPropertyName("geometry");Anima ->setDuration(1000);Anima ->setStartValue(QRect(10,200,10,10));Anima ->setEndValue(QRect(10,200,200, 200));Anima ->start();
}void Widget::ChangePos()
{Anima->setPropertyName("pos");Anima ->setDuration(1000);Anima ->setStartValue(QPoint(10,200));Anima ->setEndValue(QPoint(500,200));Anima ->start();
}void Widget::ChangePos2()
{Anima->setPropertyName("pos");Anima ->setDuration(1000);Anima ->setStartValue(QPoint(10,200));Anima ->setEndValue(QPoint(500,200));Anima->setEasingCurve(QEasingCurve::InOutCubic);Anima ->start();
}

槽函数必须要在widget.h进行函数声明。


通过演示,可以明显看到默认速度曲线和Cubic曲线运动的不同。

插值运动

前面讲的都是从A点运动到B点,而路线都是直线的,一步到位。那假如我们需要它在中途经过C点,就会需要关键点插值函数。给定帧的范围必须要在0-1,也就是把整个运动过程看做1,如果需要在一半的时候插入关键帧,那就是0.5.

示例如下,在0.5处,即一半路程时插入关键帧。

动画的暂停与恢复

把上面的演示程序改一下,加入暂停和恢复函数。这个功能可以考虑用在agv的停车载货和卸货这个步骤。

这两个函数其实是他们的父类QAbstactAnimation的成员函数。

动画结束信号

我们希望动画执行结束之后发出一个信号,这个信号可以让我去做其他的事情。实际上QT已经内置了这个信号,接下来看看如何使用?设置信号与槽,用connect函数连接。第一个函数参数是动画对象Anima,第二个是QT规定的结束信号。

Anima_Finished函数就是我自定义的槽函数,名字可以任意取。

通过手册可以看到,当动画自然结束时(相对的概念就是强制停止),这个信号会发出。这个动画还有其他几个信号,表示停止、启动、运行中。

实验:
收到结束信号,就简单显示一个对话框。

验证成功。

Qt Creator实现动画效果(单个动画)相关推荐

  1. Qt Creator创建自定义效果和材质

    Qt Creator创建自定义效果和材质 创建自定义效果和材质 创建自定义效果 创建自定义材料 创建着色器文件 创建自定义效果和材质 " Qt Quick 3D效果"和" ...

  2. Qt Creator应用3D效果

    Qt Creator应用3D效果 应用3D效果 可用效果 应用3D效果 Qt Design Studio提供了一组Qt Quick 3D效果,这些效果继承了Qt Quick 3D Effects模块中 ...

  3. php动画效果,自定义动画效果自定义动画效果

    摘要: jQuery的动画效果--自定义动画    jQuery的动画效果--自定义动画 div{width: 200px;height: 200px;background:blue;position ...

  4. css3 - 图标元素动画效果4 - 动画延迟

    上一篇中,四个图标的动画效果都是同时进行的:为了使图标由先后顺序,我们将每个动画添加延迟.如下图: 在线演示(刚一加载效果不明显,刷新一下) html: <div class="box ...

  5. css动画帧动画效果,CSS3动画之逐帧动画

    什么是逐帧动画 要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画. 看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果. 简而言之 ...

  6. html中flash的简单动画效果,css 动画效果

    要搞就搞明白,一知半解时停止研究 损失最大 css3意义: CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...

  7. 多个图标的动画效果(动画的衔接)

    前面是一个图标的动画,这篇试一试多个图标的动画: 先创建四个图标, <span class="home icon">Home</span> <span ...

  8. 转场动画:动画效果 css 动画 animate.css

    实现动画的方式 <template><button @click="show = !show">改变</button><!-- 1..cs ...

  9. html怎么打开时出现动画效果,html5动画制作打开抽出卡片动画效果代码

    特效描述:html5动画 打开抽出 卡片动画效果.抽出卡片特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Sample paper Lorem ipsum dolor sit a ...

  10. html js 动画效果,JavaScript 动画效果

    使用JavaScript可以生成图像的动画效果. ----------------------- JavaScript 动画 使用JavaScript可以生成图像的动画效果,技巧是使用JavaScri ...

最新文章

  1. c++ map嵌套队列(队列嵌套结构体指针)ok
  2. SEO交换链接时需遵循哪些原则?
  3. mysql系列十、mysql索引结构的实现B+树/B-树原理
  4. mp4v2再学习 -- H264视频编码成MP4文件
  5. 几种主要的Linux版本之间的比较
  6. php7插件开发,php7.2.6 插件fileinfo的安装
  7. 85元一个万能工具箱,配齐24种螺丝刀+扳手,媲美德国工艺,家庭必备
  8. php100并发cpu告警,多线程并发导致CPU100%的一种原因和解决办法
  9. 深入浅出Visual C++串口编程--深入浅出VC++串口编程之DOS的串口编程
  10. html里面注释浮动框,“浮动”注释与HTML / CSS / JavaScript /任何
  11. Myeclipse包变成文件夹
  12. ERP项目实施记录06
  13. 饿了么合并百度外卖,ThinkSNS:产品上线要趁早
  14. 金蝶K3退出远程桌面后,客户端无法登陆
  15. vector向量容器的一些基本操作
  16. Web应用小案例:猜数小游戏
  17. 【燕秀工具箱】模具辅助下载安装使用手册
  18. java 获取全球国家名称,语言,简称
  19. NBUT1582 比赛吃鸡腿
  20. exchange 2016升级版本及最新安全补丁

热门文章

  1. XTU oj 1112 三点共线
  2. Android学习计划[转载Sammy_Snail]
  3. Pancake的IFO解读
  4. python获取他人的ip_python - 获取访问者的IP地址
  5. 周集中团队Nature子刊中网络图布局的R语言可视化复现
  6. (转)一个初学者RHCE学习考试之路
  7. Ubuntu gbd调试
  8. 51CTO学院三周年-我的rhce7认证之路
  9. c语言n个自然数得阶乘求和,计算n个自然数阶乘的和
  10. 【ONNX】使用 C++ 调用 ONNX 格式的 PyTorch 深度学习模型进行预测(Windows, C++, PyTorch, ONNX, Visual Studio, OpenCV)