如何用Qt展示你的GIF动图

如果想用Qt把喜欢的GIF动图贴在对话框里,我们应该怎么做呢?
首先你可以使用软件Ulead Gif Animator 按帧保存你看中的动图,或者自己亲手制作一个GIf动图的每一帧图片。然后把这些图片编上序号,放入一个文件夹中,将图片重命名为x_0x的格式,如下图:这里我使用的是明日方舟的二创图,侵删!

将所有的图片重命名并放入同一个文件夹后
先创建一个Dialog的工程文件,把这个装满图片的文件夹拖入到工程文件中:在这里插入图片描述
然后我们就可以编辑代码啦!
首先是dialog.h里面的关键代码编辑:

public:
    Dialog(QWidget *parent = nullptr);
    ~Dialog();
    void paintEvent(QPaintEvent*event);//一个paintEven函数的声明
    void timerEvent(QTimerEvent*event);//一个timeEven函数的声明


    int eventID1, eventID2;//创建两个整型数据
    int curIndex_1,curIndex_2;//同上,后面会用到
    void InitPimax();//同样 函数声明


private:
    Ui::Dialog *ui;
    QPixmap pixmap_1[24];//
    QPixmap pixmap_2[24];//两个数组
};
#endif // DIALOG_H

dialog.h里面主要是放函数声明的,具体我们看后面。

dialog.cpp的代码如下面所示:
首先先进行paintEvent函数的实现:

void Dialog:: paintEvent(QPaintEvent*event){
   QPainter painter(this);
   QRect q0(0,0,400,400);//粘贴参数,四个子参数分别代表粘贴的起点(直角坐标表示),粘贴的大小(长,宽)
   QRect q1(0,0,400,400);//原图复制参数,子参数的作用同上
   painter.drawPixmap(q0,pixmap_1[curIndex_1],q1);
//使用drawtext图片把动图画到Dialog上面来,里面的参数我们接下来会讲是怎么来的
    QRect q2(0,500,240,240);
    QRect q3(0,0,240,240);
    painter.drawPixmap(q2,pixmap_2[curIndex_2],q3);

搞定paintEvent函数的实现之后,我们怎么才能让选择好的图片出现在Dialog上并动起来呢?
首先我们要把图片导入到资源中

鼠标移至工程文件夹处右键add new,如图所示选择Qt Resource File
在这里插入图片描述输入名称建立一个新的资源库,点击add Prefix建议一个新前缀后,点击add file,打开工程文件夹,找到你的图片所在的文件夹,然后一张一张的导入,如下图:在这里插入图片描述
导入之后我们继续编辑代码,实际上,我们是没办法直接让Qt像其他软件一样直接读取图片的,那么,我们利用数组,将图片导入数组中,然后让Qt读取数组,从而达到读取图片的效果。

void Dialog::InitPimax(){
    for(int i=0;i<24;i++)
    {
        QString fileName_1=QString(":/new/prefix1/res/1_%1.png").arg(i+1,2,10,QLatin1Char('0'));//把图片的名字和路径赋值给字符串,arg则是对字符串的限制,每循环一次,i+1就会把数值赋给前面百分号后面的那部分,达到字符串随循环改变的效果,QLatinChar则是在百分号后面的数字不足两位的情况下自动在前面补上字符‘0’
        QPixmap map_1(fileName_1);//再把这个字符串当作数组的参数,达到把图片赋值给数组的效果。


       pixmap_1[i]=map_1;
    }


    for(int j=0;j<24;j++)
    {
        QString fileName_2=QString(":/new/prefix1/res/2_%1.jpg").arg(j+1,2,10,QLatin1Char('0'));
        QPixmap map_2(fileName_2);


       pixmap_2[j]=map_2;
    }
};

上面这串代码 已经成功的让图片赋值给了字符串,如果只是显示一张图片。我们的代码编辑到这就可以结束了,但插入一张图片远远没有我的代码这般麻烦,我们的目标是让Qt展示Gif动图,这个时候我们需要一个时间管理 函数,即每隔一段固定的时间,运行一次代码,只要每次运行的代码,Qt展示的图片不同,就可以实现Qt展示Gif动图的功能了,代码如下:

void Dialog:: timerEvent(QTimerEvent*event)
{
    if(event->timerId()==eventID1)//两个数字分别管理两个不同的数组,实现两个Gif不同步展示
 { curIndex_1++;//数字每加一,数组往后移一位,选择的图片不一样
if(curIndex_1>=24)
    curIndex_1=0;//如果值大于你放入的图片的数量,清零并从头来过
    repaint();}




    if(event->timerId()==eventID2)
  {curIndex_2++;
if(curIndex_2>=24)
    curIndex_2=0;
  repaint();}

};

最后是开头的声明部分,代码如下:

ui->setupUi(this);
    resize(800,800);
    eventID1=startTimer(250);//第一组图片每隔0.25秒变化一次
    eventID2=startTimer(41);//第二组图片每隔0.04秒变化一次
    curIndex_1=0;//数组的图片号
    curIndex_2=0;
    InitPimax();

这样我们就搞定如何用Qt展示动图了,
现在让我们康康成果:
在这里插入图片描述如果需要完整代码可需前往本人的个人中心下载资源即可。


版权声明:本文为weixin_45832743原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。