引言

動畫很讓人煩惱，在Qt中，已經給出了很多簡單的動畫，例如 QPropertyAnimation 類實現的動畫，但是還不夠智慧，不是我想要的，相信你也有同感，今天我們就來實現自定義動畫類來方便我們日後的開發。

簡介

作業系統：window7 x64
程式設計IDE：Qt Creator 4.2.1
Qt版本： 5.0.3 · 5.3.0 · 5.8.0
最後更新：2017年4月14日

• 引言
• 簡介
• 示例
  • 效果
  • 下載
• 原理
• 實現
  • 邏輯函式

示例

效果

• 效果展示
  為了減小檔案，我對gif動畫做了一些刪減，所以看起來好像有跳幀的現象，其實並沒有。

  

• 所需資源

  

• 封裝後引用

  封裝後我只需要五行程式碼即可顯示自定義的動畫了。

#include "widget.h"
#include "ui_widget.h"
#include "customdynamicwidget.h"
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    dynamicAnima_ = new CustomDynamicWidget(this);
    dynamicAnima_->setAnimation(QPixmap(":/q/level_num.png"
 
),10,100);
    dynamicAnima_->setGeometry(41,41,41,41);
    dynamicAnima_->show();
    // 順時針播放每幀
    dynamicAnima_->startClockwise();

}

Widget::~Widget()
{
    delete ui;
}

下載

擁有了這個類，你就擁有了所有動畫！

程式碼：下載
圖片：下載

原理

• 實現關聯

  #include <QTimer>
  #include <QPainter>
  #include <QWidget>
 

• 邏輯流程

  1. 等比例切割傳入的圖片元素

     • 建立定時器，並關聯更新槽
     • 等比例對圖片進行切割

  2. 利用了定時器(QTimer) 定時更新介面

     • 定時器被觸發
     • 辨別當前幀
     • 若是尾幀辨別是否啟用了動畫無限迴圈
     • 修改幀
     • 更新介面

  3. 重寫paintEvent函式，利用畫家類(QPainter) 完成自繪。

     • 獲取當前幀的對應圖片
     • 更新當前視窗

實現

邏輯函式

• 1、等比例切割傳入的圖片元素

/*
* 設定動畫
* setAnimation
* _pix：圖片
* _count：圖片幀數
* _msec：切換速度 （毫秒 1秒 = 1000毫秒）
*/
void CustomDynamicWidget::setAnimation(const QPixmap &_pix, const short _count, const int _msec) {
    count_ = _count;
    currentIndex_ = 0;

    if (!pixList_.empty()) {
        pixList_.clear();
    }
    else {
        /*  順時針動畫關聯  */
        clockTimer_ = new QTimer(this);
        clockTimer_->setInterval(_msec);
        connect(clockTimer_, SIGNAL(timeout()), this, SLOT(updateClockwise()));

        /*  逆時針動畫關聯  */
        counterclockTimer_ = new QTimer(this);
        counterclockTimer_->setInterval(_msec);
        connect(counterclockTimer_, SIGNAL(timeout()), this, SLOT(updateCounterclockwise()));
    }

    /*  鏈式動畫圖示分離  */
    for(short i=0; i != _count; ++i) {
        pixList_.append(_pix.copy(i * (_pix.width() / _count), 0,
                        _pix.width() / _count, _pix.height()));
    }

    currentPix_ = pixList_.at(0);
    this->setGeometry(0,0,currentPix_.width(),currentPix_.height());

    update();

}

• 2、利用了定時器(QTimer) 定時更新介面

void CustomDynamicWidget::updateClockwise(void) {
    do {
        if (currentIndex_ < count_ && currentIndex_ >= 0) {
            /*  更新幀  */
            currentPix_ = pixList_.at(currentIndex_);
            update();

            /*  判斷幀數  */
            if (currentIndex_ >= (count_ - 1)) {
                if(isLoop_) {
                    currentIndex_ = 0;
                    return;
                }
                break;
            }

            /*  跳幀  */
            ++currentIndex_;
            return;
        }
    #ifndef QT_NO_DEBUG
        else {
            qDebug() << __FUNCTION__ << "waring: 錯誤的下標" << currentIndex_;
        }
    #endif
    } while(false);

    clockTimer_->stop();
    currentIndex_ = 0;
    emit clockwiseFinished();
}

• 3、重寫paintEvent函式，利用畫家類(QPainter) 完成自繪。

void CustomDynamicWidget::paintEvent(QPaintEvent *) {
    QPainter painter(this);
    painter.drawPixmap(rect(), currentPix_);
}

• 標頭檔案

#ifndef CUSTOMDYNAMICWIDGET_H
#define CUSTOMDYNAMICWIDGET_H

/*
* 自定義動畫類
* 作者：甌裔
* 郵箱：[email protected]
* CSDN：http://blog.csdn.net/csnd_ayo
* 建立時間：2017年1月9日 19:34:13
* QT版本：5.0.2 ~ 5.8.0
*/

#include <QWidget>

/*
* 說明：
*   當前類是針對一張鏈式圖片
*   鏈式圖片預設為8幀，預設0.1秒播放一幀
*   可以根據自己需要進行設定與更改
*   進行自動切割，迴圈播放每一幀
*
* 示例：
*   類內宣告 CustomDynamicWidget* dynamicAnima_
*   ui->setupUi(this);
*   dynamicAnima_ = new CustomDynamicWidget(this);
*   dynamicAnima_->setAnimation(QPixmap(":/res/loading.png"),8,100);
*   dynamicAnima_->setGeometry(100,100,300,300);
*   dynamicAnima_->show();
*   // 順時針播放每幀
*   dynamicAnima_->startClockwise();
*/

class QTimer;
class CustomDynamicWidget : public QWidget
{
    Q_OBJECT
public:

    explicit CustomDynamicWidget(QWidget *parent = 0);
    /*
    * 設定動畫圖示
    * 函式名：setAnimation
    * 引數 _pix：圖示例項
    * 引數 _count：圖示例項動畫幀數
    * 引數 _msec：動畫切幀速度 (毫秒級)
    */
    void setAnimation(const QPixmap& _pix, const short _count = 8, const int _msec = 100);

    /*  開始動畫(順時針)  */
    void startClockwise(void);
    /*  開始動畫(逆時針)  */
    void startCounterclockwise(void);
    /*  停止動畫  */
    void stop(void);
    /*  設定動畫無限迴圈  */
    void setLoop(const bool _isLoop = false) { isLoop_ = _isLoop; }

signals:

    /*  順時針動畫結束  */
    void clockwiseFinished(void);
    /*  逆時針動畫結束  */
    void counterclockwiseFinished(void);

private slots:

    /*  順時針動畫槽  */
    void updateClockwise(void);
    /*  逆時針動畫槽  */
    void updateCounterclockwise(void);

protected:

    void paintEvent(QPaintEvent *);

private:

    /*  動畫(是否無限迴圈)  */
    bool isLoop_;
    /*  圖示列表數量  */
    short count_;
    /*  當前展示的圖示下標  */
    short currentIndex_;
    /*  控制順時針槽定時器  */
    QTimer *clockTimer_;
    /*  控制逆時針槽定時器  */
    QTimer *counterclockTimer_;
    /*  當前展示的圖示  */
    QPixmap currentPix_;
    /*  圖示列表  */
    QList<QPixmap> pixList_;

};

#endif // CUSTOMDYNAMICWIDGET_H