QGraphicsView图形视图框架使用(六)图元动画
文章目录
-
- 创建基本元素
- 使用定时器
- 使用动画框架
- 调用advance()方法
之前的图形框架应用中用到的图元都是静态的，在实际开发过程中纯静态的图元肯定是不够用的，特别是在一些2D游戏类的应用中，很多图元都是动态的。这里就介绍一下在图形视图框架应用中如何实现图元动画，图元动画主要的实现方法有三种，分别如下:
1.使用定时器
2.使用动画框架
3.调用Scene的advance()方法
下面以一个例子分别说明一下三种方法如何实现。在实现图元动画之前我们先创建一个自定义背景和一个用来执行动画的图元。
创建基本元素
用来演示的图元以一条自定义的鱼为例，对应的实现如下:
//fish.h
#ifndef Fish_H
#define Fish_H
#include //fish.cpp
#include "fish.h"
#include 背景图元是一个显示范围比较大的图片图元，对应的实现如下:
//backgrounditem.h
#ifndef BACKGROUNDITEM_H
#define BACKGROUNDITEM_H
#include //backgrounditem.cpp
#include "backgrounditem.h"
BackgroundItem::BackgroundItem(const QPixmap &pixmap, QGraphicsItem * parent)
: QGraphicsPixmapItem(pixmap, parent)
{
}
QPainterPath BackgroundItem::shape() const
{
//碰撞检测的时候是通过shape()来判断的
//通过返回一个空路径,防止检测的时候检测到背景图片
//背景不会和任何图元发生碰撞
return QPainterPath();
}
将背景图元和动画图元添加到场景中，对应的实现如下:
//myscene.h
#ifndef MYSCENE_H
#define MYSCENE_H
#include //myscene.cpp
#include "myscene.h"
#include 显示效果如下所示:
使用定时器
为了能让图元动起来，我们添加定时器定时对图元的位置进行调整，默认定时器是关闭的。当按下对应的方向键之后启动定时器，当松开对应的方向键之后暂停定时器。对应的实现如下:
//myscene.h
#ifndef MYSCENE_H
#define MYSCENE_H
#include //myscene.cpp
#include "myscene.h"
#include 添加了定时器之后，我们就可以通过方向键来控制图元的运动了，对应的显示效果如下:
使用动画框架
使用定时器动态修改图元的属性，这种动态操作比较单一。如果想实现更加复杂的动画效果，可以采用QT的动画框架。QT的动画类是基于QObject的，不仅可以用于QWidget控件还可以用于图形视图框架中的图元。使用动画类，我们不仅可以操作图元的位置还可以操作图元的颜色、透明度等一系列的属性。同时我们还可以将多个动画组合到一起使用。
动画类的使用流程如下:
1.创建一个动画类(比如 QPropertyAnimation)
2.设置动画对象(setTargetObject)
3.设置需要动态操作的属性(setPropertyName)
4.设置动画的变化规则(起始值、结束值及差值曲线)
5.启动动画
默认的Scene成员变量动画类是识别不了的，我们必须把对应的成员值声明成QT能识别的属性(Property)。只有继承自QObject的类才能声明属性。我们一般在Q_OBJECT宏之后，在private作用域下通过Q_PROPERTY宏来声明属性。在之前的QML和C++交互的文章中也介绍过如何声明属性，格式如下:
Q_PROPERTY(变量类型 访问名称 READ 读方法 WRITE 写方法 NOTIFY 发生变化的通知信号)
动画框架支持的属性类型包括int、unsinged int、double、float、QLine、QLineF、QSize、QSizeF、QRect、QRectF、QColor。其它的类型不支持，因为QT无法支持其它类型的差值操作。当然我们也可以为自定义类型添加支持。
这里我们在MyScene中添加一个属性rushDistance用来定义Fish快速移动的距离，对应的实现如下所示:
#ifndef MYSCENE_H
#define MYSCENE_H
#include 定义完成属性之后，我们添加一个动画，动态的操作这个属性，从而实现Fish的快速移动，对应的实现如下:
MyScene::MyScene(QObject *parent) :
QGraphicsScene(parent)
, m_velocity(4)
, m_minX(0)
, m_maxX(0)
, m_minY(0)
, m_maxY(0)
, m_fieldHeight(600)
, m_fieldWidth(320)
, m_fish(0)
, m_sea(0)
, m_horizontalInput(0)
, m_verticalInput(0)
, m_rush_Animation(new QPropertyAnimation(this))
, m_last_input(-1)
{
//初始化背景图像
initBackgournd();
···
···
//定义动画按照固定的速度曲线对属性值进行调整
m_rush_Animation->setTargetObject(this);
m_rush_Animation->setPropertyName("rushDistance");
m_rush_Animation->setStartValue(0);
m_rush_Animation->setKeyValueAt(0.5, 0.5);
m_rush_Animation->setEndValue(1.5);
m_rush_Animation->setDuration(400);
m_rush_Animation->setEasingCurve(QEasingCurve::InCubic);
}
//启动动画,让鱼快速移动
void MyScene::rush()
{
if (QAbstractAnimation::Stopped == m_rush_Animation->state()) {
m_rush_Animation->start();
}
}
//获取快速移动的值
qreal MyScene::rushDistance() const
{
return mRushDistance;
}
void MyScene::setRushDistance(const qreal &rushDistance)
{
if (mRushDistance == rushDistance) {
return;
}
//动画执行的过程中动态刷新鱼的位置
mRushDistance = rushDistance;
emit rushDistanceChanged(mRushDistance);
int prev_pos = m_currentX;
prev_pos += m_last_input * 80 *m_rush_Animation->currentValue().toReal();
m_fish->setX(prev_pos);
//动画结束的时候更新鱼的当前位置
if (1.5 == m_rush_Animation->currentValue()) {
m_currentX = prev_pos;
}
}
//按空格键启动动画
void MyScene::keyPressEvent(QKeyEvent *event)
{
if (event->isAutoRepeat()) {
return;
}
switch (event->key())
{
case Qt::Key_Space:
rush();
default:
break;
}
}
动画图元的动画效果如下所示:
为了让背景显示不那么单调，我们添加几个动态闪烁的星星用来点缀一下，对应的星星图元的实现如下。这里需要注意一点，默认的图元并不是继承自QObject类的，无法注册属性，我们实现自定义图元的时候需要同时继承实现QObject类和QGraphicsPixmapItem类。当然我们也可以直接继承QGraphicsObject类，但是我们就需要自己在paint()函数中实现图片的绘制操作了。
//stars.h
#ifndef STAR_H
#define STAR_H
#include //stars.cpp
#include "stars.h"
#include 在背景创建的时候，动态的将小星星添加进去，添加代码如下:
void MyScene::initBackgournd()
{
···
···
for (int i = 0; i < 25; ++i) {
Star *c = new Star();
c->setPos(qrand() % (int)m_maxX, qrand() % (int)m_maxY);
c->setZValue(0);
addItem(c);
}
}
添加了星星背景之后，视图场景显示效果如下所示:
通过引入动画框架我们就可以实现各种各样的复杂的动画效果了。这在一些2D游戏开发过程中用的还挺多的。
调用advance()方法
除了定时器和动画框架外，我们还可以通过调用scene的advance()方法来让图元动起来。如果调用Scene的advance()方法，该方法会进一步调用所有图元的advance方法。我们可以在对应图元的advance()方法中实现图元的运动。
Scene的advance()方法调用分为两步调用，首先使用数值0调用一次，通知图元准备移动，然后使用数值1调用一次，通知图元移动。advance()方法通常和QTimeLine搭配到一起使用，对应的调用流程如下所示:
MyScene::MyScene(QObject *parent) :
QGraphicsScene(parent)
{
···
···
//2秒一次,调用十次
QTimeLine* timeLine = new QTimeLine(2000,this);
timeLine->setFrameRange(0,10);
connect(timeLine,SIGNAL(frameChanged(int)),this,SLOT(advance()));
}
由于所有的图元都会调用advance方法，所以所有图元都会移动，如果我们只想移动一部分图元的话，使用advance()方法可能并不是最好的动画方案。