利用QT制作动态图

利用QT来制作动态图

利用QT将静态图片绘制成动态图，借用QT中的计时器，实现图片的变换。
绘制喷火龙和动态跑步小人的gif图

我们的大体思路是：
1，将需要整合的静态图存在一个数组中便于调用
2，设计定时器，确保能每隔一段时间调用一张图片，并且一直循环下去。
3，将图片绘制到窗口上。

dialog.cpp中所用到头文件
：

#include "dialog.h"
#include "ui_dialog.h"
#include <QPainter>
#include <QPixmap>

首先定时器的使用需要用到QTimer类
QTimer类通用方法有

//创建定时器
QTimer *testTimer=new QTimer(this);
//将定时器超时信号与槽练习起来
connect(testTimer,SIGNAL(timeout()),this,SLOT(testFunction()));
//开始运行定时器，时间间隔为100ms
testTimer->start(100);


或者直接定义一个计时器。
eventID=startTimer(100);//计时器函数，每个100毫秒变换事件

然后将所要结合的图片放入一个数组中，每跳跃一次调用一次图片。

void Dialog::InitPixmap()
{
    for(int i=0;i<24;i++)
    {
        QString fileName1=QString(":/b/phl/%1.png").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map1(fileName1);
        pixmap[i]=map1;//喷火龙图片存放
    }
    for(int i=0;i<24;i++)
    {
        QString fileName2=QString(":/b/phl/1_%1.png").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map2(fileName2);
        pixmap1[i]=map2;//动态小人存放
    }
}

其中的QString（“图片所在地址”).arg(i+1,2,10,QLatinchar(‘0’));
其中此代码的喷火龙静态图片的名称为01~~24这里面变化的是01~24，所以在变化的数字处进行改变用“%1”来待替需要改变的数字。
在右边的arg（ i+1，地址最高位数，变换地址的进制数，空余的位置所来填充的数字）用来变换图片的地址来储存。

然后是painterEvent（）与timerEvent（）函数

void Dialog::paintEvent(QPaintEvent *event)
{
   QPainter painter(this);
   for(int i=0;i<3;i++)
   {
     QRect q(0,0,500,200);
     QRect q1(230,0,500,200);
     QRect q2(0,0,80,91);
     QRect q3(230+i*160,200,160,182);
     painter.drawPixmap(q1,pixmap[curIndex],q);//喷火龙的图
     painter.drawPixmap(q3,pixmap1[curIndex1+8*i],q2);//动态小人图
  }
}


void Dialog::timerEvent(QTimerEvent *event)
{
    curIndex++;
    if(curIndex>=24)
        curIndex = 0;
    curIndex1++;
    if(curIndex1>=8)
        curIndex1 = 0;
    repaint();
}

计时器每进行一次跳转则这需要函数调用一次，则使用repaint（）函数一直重复调用timerEvent（），在timerEvent（）中进行对图片数组的变换，即当图片用完后可以继续重头再来。
在painterEvent（）中调用图片，painter.drawPixmap(展示图片的位置与大小比例，图片，抽取原图片的位置与大小比例)。前面QRect定义的就是q（x初始，y初始，x方向长度，y方向长度）

dialog.cpp完整代码：

#include "dialog.h"
#include "ui_dialog.h"
#include<QPainter>
#include<QPixmap>


Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::Dialog)
{
    ui->setupUi(this);
    setWindowTitle("我的应用程序");
    
    resize(1024,512);
    eventID=startTimer(100);

    curIndex =0;
    curIndex1 =0;
    InitPixmap();
}


Dialog::~Dialog()
{
    delete ui;
}


void Dialog::paintEvent(QPaintEvent *event)
{
   QPainter painter(this);
   for(int i=0;i<3;i++)
   {
     QRect q(0,0,500,200);
     QRect q1(230,0,500,200);
     QRect q2(0,0,80,91);
     QRect q3(230+i*160,200,160,182);
     painter.drawPixmap(q1,pixmap[curIndex],q);//喷火龙的图
     painter.drawPixmap(q3,pixmap1[curIndex1+8*i],q2);//动态小人图
  }
}


void Dialog::timerEvent(QTimerEvent *event)
{
    curIndex++;
    if(curIndex>=24)
        curIndex = 0;
    curIndex1++;
    if(curIndex1>=8)
        curIndex1 = 0;
    repaint();
}


void Dialog::InitPixmap()
{
    for(int i=0;i<24;i++)
    {
        QString fileName1=QString(":/b/phl/%1.png").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map1(fileName1);


        pixmap[i]=map1;
    }
    for(int i=0;i<24;i++)
    {
        QString fileName2=QString(":/b/phl/1_%1.png").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map2(fileName2);


        pixmap1[i]=map2;
    }
}

dialog.h完整代码

#ifndef DIALOG_H
#define DIALOG_H


#include <QDialog>


QT_BEGIN_NAMESPACE
namespace Ui { class Dialog; }
QT_END_NAMESPACE


class Dialog : public QDialog
{
    Q_OBJECT


public:
    Dialog(QWidget *parent = nullptr);
    ~Dialog();


    void paintEvent(QPaintEvent*event);
    void timerEvent(QTimerEvent*event);
    int eventID;


    int curIndex;


    int curIndex1;
    void InitPixmap();
private:
    QPixmap pixmap[24];
    QPixmap pixmap1[24];
    Ui::Dialog *ui;
};
#endif // DIALOG_H

最终结果图片展示：