欢迎小伙伴的点评✨✨，相互学习、互关必回、全天在线🍳🍳🍳
博主🧑🧑 本着开源的精神交流Qt开发的经验、将持续更新续章，为社区贡献博主自身的开源精神👩‍🚀
🏛 🏛博主主页👉主页

💘Qt制作18帧丘比特表白意中人

红酥手，黄縢酒。满城春色宫墙柳。东风恶，欢情薄。一怀愁绪，几年离索。错、错、错。

春如旧，人空瘦。泪痕红浥鲛绡透。桃花落，闲池阁。山盟虽在，锦书难托。莫、莫、莫。、

世情薄，人情恶。雨送黄昏花易落。晓风乾，泪痕残。欲笺心事，独语斜阑。难、难、难。

人成各，今非昨。病魂尝似秋千索。角声寒，夜阑珊。怕人寻问，咽泪装欢。瞒、瞒、瞒。
此时此景，请丘比特大人展现才艺了。

💘18帧丘比特之心，那一帧是奔向爱情的怀抱（GIF动图效果如下）

工程文件（包含图片）已经上传到github,直接用git拉取即可，命令如下

git clone  https://github.com/dhn111/Qt.git 

1
2

图一

图二

💘代码实现及详解

💘mainwindow.h详解（看注释“铁汁”）

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include 

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); //使用timerEvent 定时器接口，对图片的播放进行延迟

   void  InitPixmap();        //读入照片的名称，获取路径，加载到QPixmap 数组中

   void  paintEvent(QPaintEvent* event);  //当定时器定时通过timerEvent结束后触发接口

   int eventID;

   int curIndex;

private slots:
   //void on_pushButton_clicked();

private:
     QPixmap pixmap[18];    //声明全局变量
    Ui::MainWindow *ui;
    QString filename;
    QPixmap map;
};
#endif // MAINWINDOW_H


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

💘动图GIf制作思路

第一步：加载图片
第二步：使用定时器延时
第三步：循环第一步和第二步做的事情

💘QPixmap（加载图片）和startTimer（延时）及其他接口详解

/************************************************************************/
QRect可以用一组左、顶、宽和高整数来构造，也可以用QPoint和QSize来构造。
QRect r1(640, 640, 20, 20);
QRect r2(QPoint(640, 640), QSize(20, 20));
/************************************************************************/
 QPainter painter(this);      //声明一个QPainter类型，使用 repaint();重新载入达到循环的目的
 QPixmap map(":/res/1.png");                 
 QRect q2(20,20,width(),height()); //设置图片在窗口的位置
 painter.drawPixmap(q2,pixmap[curIndex],q2); //把变量中图片的路径用数组的方式画出来。
 /************************************************************************/   
 int startTimer(int interval, Qt::TimerType timerType = Qt::CoarseTimer);
 功能：启动一个定时器延时结束后触发接口timerEvent(QTimerEvent *event);
 interval：定时器的触发时间（触发的间隔时间）

virtual void timerEvent(QTimerEvent *event);

功能：启动定时器后自动调用的函数（虚函数需要重写）
参数说明：event：事件（可用于判断当前发生的事件等）
/************************************************************************/
paintEvent(QPaintEvent*event)函数是QWidget类中的虚函数，
用于ui的绘制，会在多种情况下被其他函数自动调用，比如repaint()函数或者update()函数被调用时；
/************************************************************************/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

💘mainwindow.cpp详解（看注释“铁汁”）

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include
#include
#include
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    resize(500,500);
    eventID=startTimer(100); //延时100ms
    curIndex=0;
    InitPixmap();          //
}
MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::timerEvent(QTimerEvent*event)
{
    curIndex++;     //GIF动图加载的间隔为 100ms 每隔100ms 加载一帧图片，循环18次，就实现了动图
    if(curIndex>=18)    //curIndex 用在 pixmap[curIndex]中，使其循环画图
    {
        curIndex=0;
    }
    repaint();   //当定时器startTimer(100) 定时结束时触发 timerEvent(QTimerEvent*event)接口
                 //用于重载paintEvent(QPaintEvent *event);
}
 void  MainWindow::InitPixmap()
 {
     for(int i=0;i<18;i++)
     {
         filename=QString(":/res/%1.png").arg(i+1);
         //1_%1：切换到下一张
         QPixmap map(filename);         //循环获取18图片路径 ，并拷贝到数组中

         pixmap[i]=map;
     }
 }
 void MainWindow::paintEvent(QPaintEvent *event)
 {
     QPainter painter(this);      //声明一个QPainter类型，使用 repaint();重新载入达到循环的目的
     //QRect q(30,30,500,500);
     QRect q2(20,20,width(),height()); //设置图片在窗口的位置
     painter.drawPixmap(q2,pixmap[curIndex],q2); //把变量中图片的路径用数组的方式画出来。
 }



#if 0      
void MainWindow::on_pushButton_clicked()      //保存图片到标准路径
{

   QString filename = QFileDialog::getSaveFileName(this,
       tr("Save Image"),
       "",
       tr("*.bmp;; *.png;; *.jpg;; *.tif;; *.GIF")); //选择路
   pixmap->save(filename);
}
#endif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

💘GIF动图心得

这个Demo制作动图后，无法保存到本地，不过我们可以使用专业的GIF录制工具，录制动图形成GIF保存即可，这里给大家推荐一款（GIF录制工具，链接放下面了）
screentogif官方网站