Qt动图展示 Qt基于定时器实现动图展示效果
(^0^)陌路 人气:0总体概述
(1)总体介绍
动图展示主要是将已有的动图逐帧图片连续输出,达到视觉上的动态图效果,本次介绍两例,分别为单一动图和分组动图。
主要原理是设置一个定时器,然后随设置的秒数将资源中的逐帧图片输出,让图片连续变化。
(2)素材获得途径
关于素材来源,可以到网站下载现成的逐帧图片素材包,也可以找到自己喜欢的动态图,通过软件(如:爱奇艺万能播放器)将动图逐帧保存得到素材。
(注意:不论通过哪种方式获得素材,都需要使图片的序号格式一致)
(3)通用函数介绍
①绘图函数
Qt中的paintEvent()函数是一个用于绘制图形的函数,这个函数需要添加头文件:
#include <QPainter>
同时paintEvent()函数需要在dialog.h文件中提前声明:
public: void paintEvent(QPaintEvent *);
需要注意的是,此函数不能主动调用,且不能把我们需要的绘图程序写在此函数外面。
②定时器事件
定时器事件主要用到timerEvent(),timerEvent是QDbejct所内置的事件,所有继承QDbejct的类都可以使用。
要运用timerEvent()需要在类中提前声明:
public: void timerEvent(QTimerEvent *);
此外,要产生timerEvent,就需要startTimer(dalaytime)方法,例如:
int eventID; eventID = startTimer(50);
第一例:单一动图展示
dialog.h文件:
class Dialog : public QDialog { Q_OBJECT public: Dialog(QWidget *parent = nullptr); ~Dialog(); void paintEvent(QPaintEvent *); void timerEvent(QTimerEvent *); int eventID; int curIndex; void InitPixmap(); private: QPixmap pixmap[168]; Ui::Dialog *ui; };
头文件:
#include <QPainter> #include <QPixmap>
将资源放入InitPixmap函数中:
void Dialog::InitPixmap(){ for(int i=1;i<=168;i++){ QString fileName = QString(":/res/picture/1(%1).png").arg(i+1,3,10,QLatin1Char('0')); QPixmap map(fileName); pixmap[i] = map; } }
":/res/picture/1(%1).png"为图片的资源路径,且此处图片的编号需统一。
arg中的参数为:
arg(变量的值, 位数, 进制, 位数不够时补位的数);
定时器事件:
void Dialog::timerEvent(QTimerEvent *){ curIndex++; if(curIndex >= 168) { curIndex = 0; } repaint(); }
绘图函数:
void Dialog::paintEvent(QPaintEvent *){ QPainter painter(this); QRect q(0,0,450,357); QRect q2(50,50,450,357); painter.drawPixmap(q2,pixmap[curIndex],q); }
关联函数:
Dialog::Dialog(QWidget *parent) : QDialog(parent) , ui(new Ui::Dialog) { ui->setupUi(this); resize(600,600); eventID = startTimer(50); curIndex = 0; InitPixmap(); }
效果图:
第二例:分组动图展示
分组动图展示与单一动图展示大致相同,只是在绘图函数中将以放入的资源进行分组,将不同组图片同时不同位置输出。
dialog.h文件:
class Dialog : public QDialog { Q_OBJECT public: Dialog(QWidget *parent = nullptr); ~Dialog(); void paintEvent(QPaintEvent *); void timerEvent(QTimerEvent *); int eventID1; int curIndex; void InitPixmap(); private: QPixmap pixmap[64]; Ui::Dialog *ui; };
头文件:
#include <QPainter> #include <QPixmap>
将资源放入InitPixmap函数中:
void Dialog::InitPixmap(){ for(int i=1;i<=64;i++){ QString fileName = QString(":/res/picture/1_%1.png").arg(i+1,2,10,QLatin1Char('0')); QPixmap map(fileName); pixmap[i] = map; } }
定时器事件:
void Dialog::timerEvent(QTimerEvent *){ curIndex++; if(curIndex >= 8) { curIndex = 0; } repaint(); }
绘图函数:
void Dialog::paintEvent(QPaintEvent *){ QPainter painter(this); int i=0;i<8;i++){ QRect q(0,0,80,91); QRect q2(2*80*i,100,2*80,2*91); painter.drawPixmap(q2,pixmap[curIndex+8*i],q); } }
关联函数:
Dialog::Dialog(QWidget *parent) : QDialog(parent) , ui(new Ui::Dialog) { ui->setupUi(this); resize(2*91*8,1024); eventID1 = startTimer(100); curIndex = 0; InitPixmap(); }
效果图:
加载全部内容