亲宝软件园·资讯

展开

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();
}

效果图:

加载全部内容

相关教程
猜你喜欢
用户评论