利用Qt完成动图

深渊向深渊呼唤

我作为一个Qt的初学者,也是一个编程的萌新,我想今天教大家如何使用Qt来编写 一个把多张图片合成动图的程序。

首先我们要学会如何在页面中显示一张图片

具体步骤如下:
1)创建一个MainWindow文件,不需要ui
2)在.h文件中函数声明:void paintEvent(QPaintEvent* event);
3) 在文件中新建一个“res”文件夹,将你需要的图片添加进去
如图:在这里插入图片描述
4)再插入图片,过程:打开左上角的新建->新建文件或项目->Qt->Qt Recource File->名称填写res->一直下一步->add Files 中选择你需要的图片->ctrl+s保存
5)完成如下代码:

void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QPixmap map(":/new/res/IMG_3556(20200415-224940).JPG");//图片的位置
    QRect q(0,0,640,640);//图片的大小
    painter.drawPixmap(q,map,q);
}

效果如图:在这里插入图片描述

其次,我们要学会定时器的使用

在Qt中使用定时器有两种方法,一种是QObject类,一种是QTimer类
QObject类
QObject类是所以Qt对象的基类,它提供了一个基本的定时器。通过QObject::startTimer函数可以启动一个寄存器,这个函数返回一个唯一的整数表示这个定时器。这个定时器每到一个时间间隔就会“触发”并产生一个定时器事件,直到使用这个定时器的标识符来调用QObject::KillTimer结束。
QObject类中与定时器相关的成员函数有startTimer,timeEvent,killTimer。
startTimer,timeEvent,killTimer的原型如下:

int QObject::startTimer(int interval, Qt::TimerType timerType);
void QObject::timerEvent(QTimerEvent *event);
void QObject::killTimer(int id);

QTimer类
通常的使用方法:

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

最后,就是完成动图

动图就是把很多张图片以很快的速度浏览,在视觉上“动起来”,每隔0.1秒切换到下一张图片就好了。
话不多说,直接上代码:
.h文件:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
   void timerEvent(QTimerEvent* event);

   void  InitPixmap();

   void  paintEvent(QPaintEvent* event);

   int eventID;

   int curIndex;

private:
     QPixmap pixmap[64];
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

.cpp文件:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QPainter>
#include<QPixmap>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    resize(500,500);
    eventID=startTimer(100);
    curIndex=0;
    InitPixmap();
}
MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::timerEvent(QTimerEvent*event)
{
    curIndex++;//图片标号加
    if(curIndex>=64)
    {
        curIndex=0;
    }
    repaint();
}
 void  MainWindow::InitPixmap()
 {
     for(int i=0;i<64;i++)
     {
         QString filename=QString(":/new/prefix1/res/1_%1.png").arg(i+1,2,10,QLatin1Char('0'));
         //1_%1:切换到下一张
         QPixmap map(filename);

         pixmap[i]=map;
     }
 }
 void MainWindow::paintEvent(QPaintEvent *event)
 {
     QPainter painter(this);
     QRect q(0,0,80,91);
     QRect q2(0,0,width(),height());
     painter.drawPixmap(q2,pixmap[curIndex],q);
 }

效果图:
在这里插入图片描述

总结:
1)制作动图就是添加图片和定时器应用的结合,难度不高,掌握理论知识后就可以上机实验了。
2)图片的名称要有序,否则++不起作用,图片不会切换,例如:
在这里插入图片描述
3)快速寻找图片地址的方法:单击res.qrc -> Open With -> 资源编辑器 -> 肤质资源路径到剪切板

文中的一些理论知识选自 清华大学出版社 仇国巍《Qt图形界面编程入门》

最后,作为一名萌新,如果有大佬发现文章中有不正确的地方可以及时指出,也可以提出你们宝贵的建议。

栏目