Qt基於定時器實現動圖展示效果

阿新 • • 發佈：2020-06-16

本文例項為大家分享了Qt基於定時器實現動圖展示的具體程式碼，供大家參考，具體內容如下

總體概述

（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,450,357);
  QRect q2(50,50,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();
}

效果圖：

Qt基於定時器實現動圖展示效果

第二例：分組動圖展示

分組動圖展示與單一動圖展示大致相同，只是在繪圖函式中將以放入的資源進行分組，將不同組圖片同時不同位置輸出。

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

效果圖：

Qt基於定時器實現動圖展示效果