Qt編寫自定義控制元件33-圖片切換動畫

阿新 • • 發佈：2019-08-17

一、前言

在很多看圖軟體中，切換圖片的時候可以帶上動畫過渡或者切換效果，顯得更人性化，其實主要還是炫一些，比如百葉窗、透明度變化、左下角飛入等，無論多少種效果，核心都是圍繞QPainter來進行，將各種動畫效果對應的圖片的區域動態計算並繪製出來，配合以QPropertyAnimation動畫屬性產生線性插值，比如漸入飛入時候，可以中間快速兩端慢速。目前動畫型別有9種，後期還會不斷增加。

1：影象1漸漸變淡,影象2漸漸顯現
2：百葉窗效果
3：影象從右向左翻轉
4：從外到內水平分割
5：影象1從左至右退出可視區域,同時影象2從左至右進入可視區域
6：影象1從左至右退出可視區域,同時影象2從左至右進入可視區域

7：影象1從下至上退出可視區域,同時影象2從下至上進入可視區域
8：影象1從上至下退出可視區域,同時影象2從上至下進入可視區域
9：影象1不動,同時影象2從右下到左上

二、實現的功能

1:支援多種等待樣式風格圓弧狀風格旋轉圓風格三角圓弧線條風格圓環風格
2:可設定範圍值和當前值
3:可設定前景色背景色
4:可設定順時針逆時針旋轉
5:支援任意大小縮放
6:支援設定旋轉速度間隔

三、效果圖

四、標頭檔案程式碼

#ifndef IMAGEANIMATION_H
#define IMAGEANIMATION_H

/**
 * 圖片切換動畫控制元件 作者:趙彥博(QQ:408815041 [email protected]) 2019-6-10
 * 1:可設定動畫型別,預設9種,後期會增加更多
 * FadeEffect = 0,             //影象1漸漸變淡,影象2漸漸顯現
 * BlindsEffect = 1,           //百葉窗效果
 * FlipRightToLeft = 2,        //影象從右向左翻轉
 * OutsideToInside = 3,        //從外到內水平分割
 * MoveLeftToRightEffect = 4,  //影象1從左至右退出可視區域,同時影象2從左至右進入可視區域
 * MoveRightToLeftEffect = 5,  //影象1從左至右退出可視區域,同時影象2從左至右進入可視區域
 * MoveBottomToUpEffect = 6,   //影象1從下至上退出可視區域,同時影象2從下至上進入可視區域
 * MoveUpToBottomEffect = 7,   //影象1從上至下退出可視區域,同時影象2從上至下進入可視區域
 * MoveBottomToLeftUpEffect = 8//影象1不動,同時影象2從右下到左上
 * 2:可設定兩張圖片的路徑名稱或者圖片
 * 3:可設定動畫因子
 */

#include <QWidget>

class QPropertyAnimation;

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT ImageAnimation : public QWidget
#else
class ImageAnimation : public QWidget
#endif

{
    Q_OBJECT
    Q_ENUMS(AnimationType)
    Q_PROPERTY(float factor READ getFactor WRITE setFactor)
    Q_PROPERTY(QString imageName1 READ getImageName1 WRITE setImageName1)
    Q_PROPERTY(QString imageName2 READ getImageName2 WRITE setImageName2)
    Q_PROPERTY(QPixmap pixmap1 READ getPixmap1 WRITE setPixmap1)
    Q_PROPERTY(QPixmap pixmap2 READ getPixmap2 WRITE setPixmap2)
    Q_PROPERTY(AnimationType animationType READ getAnimationType WRITE setAnimationType)

public:
    enum AnimationType {
        FadeEffect = 0,             //影象1漸漸變淡,影象2漸漸顯現
        BlindsEffect = 1,           //百葉窗效果
        FlipRightToLeft = 2,        //影象從右向左翻轉
        OutsideToInside = 3,        //從外到內水平分割
        MoveLeftToRightEffect = 4,  //影象1從左至右退出可視區域,同時影象2從左至右進入可視區域
        MoveRightToLeftEffect = 5,  //影象1從左至右退出可視區域,同時影象2從左至右進入可視區域
        MoveBottomToUpEffect = 6,   //影象1從下至上退出可視區域,同時影象2從下至上進入可視區域
        MoveUpToBottomEffect = 7,   //影象1從上至下退出可視區域,同時影象2從上至下進入可視區域
        MoveBottomToLeftUpEffect = 8//影象1不動,同時影象2從右下到左上
    };

    explicit ImageAnimation(QWidget *parent = 0);
    ~ImageAnimation();

protected:
    void paintEvent(QPaintEvent *);
    void fadeEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void blindsEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void flipRightToLeft(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void outsideToInside(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveLeftToRightEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveRightToLeftEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveBottomToUpEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveUpToBottomEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveBottomToLeftUpEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);

private:
    float factor;                   //動畫因子(0 - 1.0之間變化)
    QString imageName1;             //圖片1路徑名稱
    QString imageName2;             //圖片2路徑名稱
    QPixmap pixmap1;                //圖片1
    QPixmap pixmap2;                //圖片2
    AnimationType animationType;    //動畫效果型別

    QPropertyAnimation *animation;  //動畫屬性

public:
    float getFactor()               const;
    QString getImageName1()         const;
    QString getImageName2()         const;
    QPixmap getPixmap1()            const;
    QPixmap getPixmap2()            const;
    AnimationType getAnimationType()const;

    QSize sizeHint()                const;
    QSize minimumSizeHint()         const;

public Q_SLOTS:
    //設定動畫因子
    void setFactor(float factor);

    //設定圖片1+圖片2路徑名稱
    void setImageName1(const QString &imageName1);
    void setImageName2(const QString &imageName2);

    //設定圖片1+圖片2
    void setPixmap1(const QPixmap &pixmap1);
    void setPixmap2(const QPixmap &pixmap2);

    //設定動畫型別
    void setAnimationType(const AnimationType &animationType);

    //啟動+停止動畫
    void start();
    void stop();
};

#endif // IMAGEANIMATION_H

五、核心程式碼

void ImageAnimation::paintEvent(QPaintEvent *)
{
    if (pixmap1.isNull() || pixmap2.isNull()) {
        return;
    }

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    switch (animationType) {
    case 0:
        fadeEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 1:
        blindsEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 2:
        flipRightToLeft(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 3:
        outsideToInside(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 4:
        moveLeftToRightEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 5:
        moveRightToLeftEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 6:
        moveBottomToUpEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 7:
        moveUpToBottomEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 8:
        moveBottomToLeftUpEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    default:
        break;
    }
}

void ImageAnimation::fadeEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int w = rect.width();
    int h = rect.height();
    int alpha = 255 * (1.0f - factor);

    QPixmap alphaPixmap(pixmap1.size());
    alphaPixmap.fill(Qt::transparent);

    QPainter p1(&alphaPixmap);
    p1.setCompositionMode(QPainter::CompositionMode_Source);
    p1.drawPixmap(0, 0, pixmap1);
    p1.setCompositionMode(QPainter::CompositionMode_DestinationIn);
    p1.fillRect(alphaPixmap.rect(), QColor(0, 0, 0, alpha));
    p1.end();

    int x = (w - pixmap1.width()) / 2;
    int y = (h - pixmap1.height()) / 2;
    painter->drawPixmap(x, y, alphaPixmap);

    alpha = 255 * (factor);
    alphaPixmap.fill(Qt::transparent);
    QPainter p2(&alphaPixmap);
    p2.setCompositionMode(QPainter::CompositionMode_Source);
    p2.drawPixmap(0, 0, pixmap2);
    p2.setCompositionMode(QPainter::CompositionMode_DestinationIn);
    p2.fillRect(alphaPixmap.rect(), QColor(0, 0, 0, alpha));
    p2.end();

    painter->drawPixmap(x, y, alphaPixmap);
}

void ImageAnimation::blindsEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int i, n, w, h, x1, y1, x2, y2, dh, ddh;

    w = rect.width();
    h = rect.height();
    x1 = (w - pixmap1.width()) / 2;
    y1 = (h - pixmap1.height()) / 2;
    x2 = (w - pixmap2.width()) / 2;
    y2 = (h - pixmap2.height()) / 2;

    painter->drawPixmap(x1, y1, pixmap1);

    n = 10;
    dh = pixmap2.height() / n;
    ddh = factor * dh;
    if (ddh < 1) {
        ddh = 1;
    }

    for(i = 0; i < n; i++) {
        painter->drawPixmap(x2, y2 + i * dh, pixmap2, 0, i * dh, pixmap2.width(), ddh);
    }
}

void ImageAnimation::flipRightToLeft(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int x1, y1, x2, y2, w, h;
    float rot;
    QTransform trans;

    w = rect.width();
    h = rect.height();
    x1 = (w - pixmap1.width()) / 2;
    y1 = (h - pixmap1.height()) / 2;
    x2 = (w - pixmap2.width()) / 2;
    y2 = (h - pixmap2.height()) / 2;

    rot = factor * 90.0f;
    trans.translate(w * (1 - factor), h / 2);
    trans.rotate(rot, Qt::YAxis);
    trans.translate(-w, -h / 2);

    painter->setTransform(trans);
    painter->drawPixmap(x1, y1, pixmap1);
    painter->resetTransform();

    trans.reset();
    rot = 90 * (factor - 1);
    trans.translate(w * (1 - factor), h / 2);
    trans.rotate(rot, Qt::YAxis);
    trans.translate(0, -h / 2);

    painter->setTransform(trans);
    painter->drawPixmap(x2, y2, pixmap2);
    painter->resetTransform();
}

void ImageAnimation::outsideToInside(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int   w, h, x1, y1, x2, y2, x3, y3, dh, ddh;

    w = rect.width();
    h = rect.height();
    x1 = (w - pixmap1.width()) / 2;
    y1 = (h - pixmap1.height()) / 2;
    painter->drawPixmap(x1, y1, pixmap1);

    dh = pixmap2.height() / 2;
    ddh = factor * dh;
    if (ddh < 1) {
        ddh = 1;
    }

    x2 = (w - pixmap2.width()) / 2;
    y2 = (h - pixmap2.height()) / 2;
    painter->drawPixmap(x2, y2, pixmap2, 0, 0, pixmap2.width(), ddh);

    x3 = (w - pixmap2.width()) / 2;
    y3 =  dh * (1.0f - factor) + h / 2;
    if(y3 != h / 2) {
        y3 += 1;
    }

    painter->drawPixmap(x3, y3, pixmap2, 0, pixmap2.height() - ddh, pixmap2.width(), ddh);
}

void ImageAnimation::moveLeftToRightEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int x, y, w, h, x1, y1, x2, y2;

    w = rect.width();
    h = rect.height();
    x1 = (w - pixmap1.width()) / 2;
    y1 = (h - pixmap1.height()) / 2;
    x2 = (w - pixmap2.width()) / 2;
    y2 = (h - pixmap2.height()) / 2;

    x = x1 + w * factor;
    y = y1;
    painter->drawPixmap(x, y, pixmap1);

    x = x2 + w * (factor - 1);
    y = y2;
    painter->drawPixmap(x, y, pixmap2);
}

六、控制元件介紹

超過149個精美控制元件，涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt整合的控制元件數量。
每個類都可以獨立成一個單獨的控制元件，零耦合，每個控制元件一個頭檔案和一個實現檔案，不依賴其他檔案，方便單個控制元件以原始碼形式整合到專案中，較少程式碼量。qwt的控制元件類環環相扣，高度耦合，想要使用其中一個控制元件，必須包含所有的程式碼。
全部純Qt編寫，QWidget+QPainter繪製，支援Qt4.6到Qt5.12的任何Qt版本，支援mingw、msvc、gcc等編譯器，支援任意作業系統比如windows+linux+mac+嵌入式linux等，不亂碼，可直接整合到Qt Creator中，和自帶的控制元件一樣使用，大部分效果只要設定幾個屬性即可，極為方便。
每個控制元件都有一個對應的單獨的包含該控制元件原始碼的DEMO，方便參考使用。同時還提供一個所有控制元件使用的整合的DEMO。
每個控制元件的原始碼都有詳細中文註釋，都按照統一設計規範編寫，方便學習自定義控制元件的編寫。
每個控制元件預設配色和demo對應的配色都非常精美。
超過130個可見控制元件，6個不可見控制元件。
部分控制元件提供多種樣式風格選擇，多種指示器樣式選擇。
所有控制元件自適應窗體拉伸變化。
整合自定義控制元件屬性設計器，支援拖曳設計，所見即所得，支援匯入匯出xml格式。
自帶activex控制元件demo，所有控制元件可以直接執行在ie瀏覽器中。
整合fontawesome圖形字型+阿里巴巴iconfont收藏的幾百個圖形字型，享受圖形字型帶來的樂趣。
所有控制元件最後生成一個dll動態庫檔案，可以直接整合到qtcreator中拖曳設計使用。
目前已經有qml版本，後期會考慮出pyqt版本，如果使用者需求量很大的話。

七、SDK下載

SDK下載連結：https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取碼：877p
下載連結中包含了各個版本的動態庫檔案，所有控制元件的標頭檔案，使用demo，自定義控制元件+屬性設計器。
自定義控制元件外掛開放動態庫dll使用（永久免費），無任何後門和限制，請放心使用。
目前已提供26個版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
不定期增加控制元件和完善控制元件，不定期更新SDK，歡迎各位提出建議，謝謝！
widget版本（QQ：517216493）qml版本（QQ：373955953）三峰駝（QQ：278969898）。
濤哥的知乎專欄 Qt進階之路 https://zhuanlan.zhihu.com/TaoQt
歡迎關注微信公眾號【高效程式設計師】，C++/Python、學習方法、寫作技巧、熱門技術、職場發展等內容，乾貨多多，

Qt編寫自定義控制元件33-圖片切換動畫

一、前言

二、實現的功能

三、效果圖

四、標頭檔案程式碼

五、核心程式碼

六、控制元件介紹

七、SDK下載

Qt編寫自定義控制元件33-圖片切換動畫

Qt編寫自定義控制元件19-圖片背景時鐘

Qt編寫自定義控制元件36-圖片瀏覽器

Qt編寫自定義控制元件屬性設計器

Qt編寫自定義控制元件一開關按鈕

Qt編寫自定義控制元件外掛開放動態庫dll使用（永久免費）

Qt編寫自定義控制元件1-汽車儀表盤

Qt編寫自定義控制元件2-進度條標尺

Qt編寫自定義控制元件6-指南針儀表盤

Qt編寫自定義控制元件7-自定義可拖動多邊形

Qt編寫自定義控制元件9-導航按鈕控制元件

Qt編寫自定義控制元件11-裝置防區按鈕控制元件

Qt編寫自定義控制元件12-進度儀表盤

Qt編寫自定義控制元件13-多型進度條

Qt編寫自定義控制元件14-環形進度條

Qt編寫自定義控制元件15-百分比儀表盤

Qt編寫自定義控制元件16-魔法老鼠

Qt編寫自定義控制元件18-魔法小魚

Qt編寫自定義控制元件20-自定義餅圖

Qt編寫自定義控制元件28-顏色滑塊面板

Qt編寫自定義控制元件33-圖片切換動畫

一、前言

二、實現的功能

三、效果圖

四、標頭檔案程式碼

五、核心程式碼

六、控制元件介紹

七、SDK下載

相關推薦