Qt實現炫酷啓動圖-動態進度條

目錄

• 1、簡述
• 2、動效進度條
  • 一、光效進度條
  • 二、延遲到達進度條
  • 三、接口說明
• 3、啓動圖
  • 一、實現思路
  • 二、背景圖切換
• 4、測試
  • 一、構造啓動圖
  • 二、背景圖
  • 三、其餘信息
  • 四、事件循環
• 5、源碼

1、簡述

最近接到一個新需求，讓作一個動效進度條。

因爲咱們的產品比較大，在軟件啓動的時候會消耗比較長的時間，原生的進度條已經不能知足咱們的需求，這裏咱們就須要一個會動的進度條，效果以下圖所示。

光效進度條主要是作了一個進度動畫，在已完成的部分上進行快速的迭代渲染，給用戶一種直觀感覺，咱們的軟件一直努力加載，它還活着。

有了這個進度條以後，當咱們的進度從40%到50%這個持續的過程當中，界面不再會出現假死的狀況，是否是很完美呢。。。

下面我就來分析下這個動效進度條是怎麼作的

2、動效進度條

如效果圖所示，光效進度條不一樣於通常的進度條，他在基礎的任務進度之上還添加了一層光效，主要是想告訴用戶咱們的軟件一直在努力運行，請在耐心的等待一下下。

我本身在作功能的時候，每每喜歡先作一個測試demo，而後在把作好的功能集成在正式環境，這個功能也不列外，如第一節中展現的效果圖，就是測試demo的樣子，雖然很醜，可是基礎功能是有的。

如今的不少軟件，在進度展現上都有了比較絢麗的效果，好比壓縮軟件，解壓文件的時候都會有動效進度條，用過的同窗應該都知道長啥樣，而咱們的光效進度條跟這個效果差很少，除此以外咱們還提供了另外一種動效，延遲動效，他們兩個在必定程度上都展現了更友好的進度效果。

在開始分析功能前，首先咱們先來考慮下咱們的需求：動效進度條，也就是說在原來的進度條基礎上須要添加實時動畫，讓進度條看起來更炫酷一些，除了光效進度條之外，還有一種延遲到達進度條，也屬於動態進度條。

延遲動效、說直白一點兒就是延遲到達，當咱們設置了進度從10%到20%時，程序模擬了一個漸進的過程，使用一個時間段走完了這10%的進度。

下面咱們分別來介紹這兩種進度條的實現

實現炫酷的進度條咱們能夠從QWidget自定義開始寫，也就是說從頭開始寫，但一般咱們不這樣幹，由於這樣可能會寫出無窮無盡的bug，並且現有的輪子已經很穩定了，爲何還要造呢。

一、光效進度條

光效進度條咱們使用了一個小技巧，採用一個簡單的辦法實現，咱們的光效進度條控件繼承自Qt原生進度條類QProgressBar，在新類中咱們只須要在Qt繪製完原生進度條以後，補畫動效便可。

a、paintEvent函數

paintEvent函數是Qt的繪製函數，當界面刷新的時候，這個接口函數就會被調用，所以咱們須要重寫這個接口，首先調用父窗口的繪製方法，而後咱們在繪製咱們本身的動效，代碼以下所示

QProgressBar::paintEvent(event);
drawCache繪製動效

b、drawCache繪製動效

繪製動效的時候，咱們須要知道動效的繪製區域，這個地方咱們須要主動去解析qss的一些參數，Qt的style()->subElementRect這個接口恰好能夠拿到咱們須要的信息

下面簡單描述下咱們的實現流程

• 首先咱們獲取進度條的幾何大小和中間進度的幾何大小，這樣的話咱們就能夠計算出來各border的數值
• 而後根據咱們當前的value值就能夠計算出進度條已經走過(就是值小於咱們設定的區域)的幾何大小
• 咱們的光效將是跑在第二步計算出來的區域上，一直循環迭代
• 內存裏咱們維護一個cacheValue，這個值在每次界面刷新的時候遞增，可是不能大於第二步的value值，cacheValue將是咱們動效繪製的一個關鍵參數，他表示了動效繪製的長度
• 構造一個漸變刷子，設置給QPainter
• 繪製動效

上下大體描述了下繪製動效的一個流程，下面送上具體代碼，因爲篇幅緣由，代碼我進行了部分僞代碼處理。

void GMPProgressBar::drawCache()
{
    QStyleOptionProgressBarV2 opt;
    QRect outerRect = style()->subElementRect(QStyle::SE_ProgressBarGroove, &opt, this);
    QRect innerRect = style()->subElementRect(QStyle::SE_ProgressBarContents, &opt, this);
    QMargins borders(構造一個QMargins);

    QRectF rect(動效繪製區域);

    if (m_iCacheValue != 0)
    {
        QPainter painter(this);
        QLinearGradient gradient(構造繪圖刷子);
        painter.setBrush(gradient);
        painter.drawRoundedRect(rect, 2, 2);
    }
}

c、定時刷新

因爲咱們的動效是須要主動去刷新的，所以咱們須要聲明一個定時器，而後定時去刷新，實現代碼可能像下面這樣

connect(m_pCacheTimer, &QTimer::timeout, this, [this]{
        if (TM_CACHE == m_mode)
        {
            ++m_iCacheValue;
            repaint();
        }else
        {
            m_pCacheTimer->stop();
        }
    });

定時器只須要在咱們第一次設置進度條值的時候啓動，或者當咱們設置一個新的值，而定時器沒有啓動，咱們就須要去激活定時器。

TM_CACHE模式便是咱們的動效模式，TM_SMOOTH模式則是咱們的延遲到達模式

connect(this, &QProgressBar::valueChanged, [this](int value){//TM_CACHE模式下 啓動動畫時機
        if (!m_pCacheTimer->isActive() && value != 0 && TM_CACHE == m_mode)
        {
            m_pCacheTimer->start(m_iRefreshleveling);
        }
    });

動效進度條效果以下圖所示

二、延遲到達進度條

動效進度條可能更適用於啓動界面，可是也有一些時候，咱們可能須要更平緩的一個加載曲線，例如安裝軟件、卸載軟件的時候。

a、setValue

延遲到達進度條和動效進度條的實現方式就有所差異了，對於實現延遲到達進度條，咱們這裏重寫了setValue函數，當外部調用該接口設置value值時，咱們並無當即去設置當前值，而是使用了一個時間段去完成這個值得刷新。

• 外部調用setValue時，咱們首先計算出咱們應該繪製的最大寬度PixelMax、當前已經繪製到的最大寬度cacheValue和咱們的步長
• 設置定時器刷新頻率，並重啓定時器
• 定時器刷新時，cacheValue自增咱們的步長
• 調用父類的QProgressBar::setValue接口設置值

b、定時器

延遲達到功能的的定時器和以前咱們什麼的動效定時器能夠混用一個，咱們定時器刷新的時候，針對不一樣的動畫模式，咱們執行不一樣的的代碼便可，實現代碼可能像下面這樣

connect(m_pCacheTimer, &QTimer::timeout, this, [this]{
    if (TM_CACHE == m_mode)
    {
        ++m_iCacheValue;
        repaint();
    }
    else if (TM_SMOOTH == m_mode)
    {
        changeSmooth();
    }
    else
    {
        m_pCacheTimer->stop();
    }
});

延遲到達進度條效果以下圖所示

三、接口說明

光效進度條類對外只暴露了3個接口，分別是設置動畫模式、動畫時長和刷新頻率

特別須要注意的是，咱們這裏重寫了父類的setValue接口，這意味着咱們不能使用多態來操做這個接口

void setTransitionMode(TransitionMode mode);//設置動畫模式
void setSmoothDuration(int duration);//設置刷新總時長 模式爲TM_SMOOTH時有效
void setRefreshleveling(int rate);//設置刷新頻率 每次更改TransitionMode以後會變爲默認值

a、修改動畫模式

修改動畫模式的時候，咱們須要清空內存中的全部數據，並把value值設爲0。

void GMPProgressBar::setTransitionMode(TransitionMode mode)
{
    if (m_mode == mode)
    {
        return;
    }

    m_mode = mode;
    clearData();

    QProgressBar::setValue(0);
}

b、其餘接口

設置刷新時長和頻率接口都比較簡單，不作特別說明

特別注意：這個3個接口最好是在動畫啓動前設置，動畫開始後儘可能不要去調用

3、啓動圖

第二節咱們主要是講述了怎麼作一個動效進度條，這一節咱們來作一個啓動圖頁面，把這個動效使用進去。

啓動圖不是咱們主要分析的內容，這個我就簡單說下這個類的實現方式和一些藉口說明

一、實現思路

Qt已經給咱們提供了一個QSplashScreen，可是使用起來仍是特別有限，所以這裏我把Qt的源碼直接進行了二次開發

• 首先Qt的原生實現方式基本都被移植了出來
• 啓動圖使用了簡單的上下佈局，上面是一張我自繪製的圖片，放在了一個QLabel上，下面是動效進度條
• 自繪製的圖片上包括了，產品名稱、logo、背景圖等等

二、背景圖切換

當咱們調用setPixmap設置背景圖時，若是咱們指定了多張圖，我將會啓動一個定時器，在指定時長後從新構造一張大的背景圖，並添加到啓動窗口上

這裏主要說明下背景圖是怎麼構造出來的，代碼以下所示

a、根據背景圖構造啓動圖大小，並移動到屏幕中間

m_currentPixmap = m_lstPixmaps.at(m_iCurrentIndex);

QRect size(QPoint(), m_currentPixmap.size()  / m_currentPixmap.devicePixelRatio());
size.setHeight(size.height() + StatusBarHeight);
setFixedSize(size.size());
m_pProgressBar->setFixedWidth(size.width() / 8 * 3);
move(QApplication::desktop()->screenGeometry().center() - size.center());

b、繪製程序logo

QPainter painter(&m_currentPixmap);
painter.drawPixmap(m_startPos, m_logo);

c、繪製標題欄

painter.save();
painter.setFont(m_titleFont);

QFontMetrics fontMetrics(m_titleFont);
int textWidth = fontMetrics.width(m_strWindowTitle);
int textHegith = m_logo.height();
QRect textTect = QRect(m_startPos + QPoint(13 + m_logo.width(), 0), QSize(textWidth, textHegith));
painter.drawText(textTect, m_strWindowTitle, QTextOption(Qt::AlignCenter));
painter.restore();

d、設置給QLabel背景圖

m_pWindowBackground->setPixmap(m_currentPixmap);

啓動圖的效果這裏就不在貼圖了，第三節上的兩個gif圖都是最終的啓動圖效果

4、測試

最後就是測試代碼了，主要是模擬了程序的一個加載過程

一、構造啓動圖

首先咱們構造一個啓動圖對象，並設置程序logo和動畫模式

GMPSplashScreen * screen = new GMPSplashScreen(QPixmap(":/splashScreen/start.png"));
screen->show();
screen->setLogo(QIcon("logo.ico").pixmap(48, 48));
screen->setTransitionMode(GMPProgressBar::TM_CACHE);

二、背景圖

設置背景圖，並設置背景圖更換時間間隔

QList<QPixmap> lstPixmap;
lstPixmap.append(QPixmap(":/splashScreen/start.png"));
lstPixmap.append(QPixmap(":/splashScreen/start.jpg"));
screen->setPixmap(lstPixmap, 2000);

三、其餘信息

設置程序的提示信息和標題欄

screen->showMessage("Established connections", 0);
screen->setTitle(QStringLiteral("廣聯達BIM土建計量GTJ2018"));

四、事件循環

這裏寫了一個死循環，主要是爲了模擬程序的一個加載過程，每隔10ms處理下界面刷新事件

a.processEvents();

while (1)
{
    QTest::qSleep(10);
    a.processEvents();
}
splashScreen w;
w.show();

screen->finish(&w);

5、源碼

須要源碼的留郵箱，如今的csdn簡直太坑爹了。。。

若是您以爲文章不錯，不妨給個 打賞，寫做不易，感謝各位的支持。您的支持是我最大的動力，謝謝！！！

---

很重要--轉載聲明

1. 本站文章無特別說明，皆爲原創，版權全部，轉載時請用連接的方式，給出原文出處。同時寫上原做者：朝十晚八 or Twowords

2. 如要轉載，請原文轉載，如在轉載時修改本文，請事先告知，謝絕在轉載時經過修改本文達到有利於轉載者的目的。