一、簡(jiǎn)述

最近接到一個(gè)新需求，讓做一個(gè)動(dòng)效進(jìn)度條。

由于我們的產(chǎn)品比較大，在軟件啟動(dòng)的時(shí)候會(huì)消耗比較長(zhǎng)的時(shí)間，原生的進(jìn)度條已經(jīng)不能滿(mǎn)足我們的需求，這里我們就需要一個(gè)會(huì)動(dòng)的進(jìn)度條，效果如下圖所示。

光效進(jìn)度條主要是做了一個(gè)進(jìn)度動(dòng)畫(huà)，在已完成的部分上進(jìn)行快速的迭代渲染，給用戶(hù)一種直觀感受，我們的軟件一直努力加載，它還活著。

有了這個(gè)進(jìn)度條之后，當(dāng)我們的進(jìn)度從40%到50%這個(gè)持續(xù)的過(guò)程中，界面再也不會(huì)出現(xiàn)假死的情況，是不是很完美呢。。。

下面我就來(lái)分析下這個(gè)動(dòng)效進(jìn)度條是怎么做的

二、動(dòng)效進(jìn)度條

如效果圖所示，光效進(jìn)度條不同于一般的進(jìn)度條，他在基礎(chǔ)的任務(wù)進(jìn)度之上還添加了一層光效，主要是想告訴用戶(hù)我們的軟件一直在努力運(yùn)行，請(qǐng)?jiān)谀托牡牡却幌孪隆?/p>

我自己在做功能的時(shí)候，往往喜歡先做一個(gè)測(cè)試demo，然后在把做好的功能集成在正式環(huán)境，這個(gè)功能也不列外，如第一節(jié)中展示的效果圖，就是測(cè)試demo的樣子，雖然很丑，但是基礎(chǔ)功能是有的。

現(xiàn)在的很多軟件，在進(jìn)度展示上都有了比較絢麗的效果，比如壓縮軟件，解壓文件的時(shí)候都會(huì)有動(dòng)效進(jìn)度條，用過(guò)的同學(xué)應(yīng)該都知道長(zhǎng)啥樣，而我們的光效進(jìn)度條跟這個(gè)效果差不多，除此之外我們還提供了另一種動(dòng)效，延遲動(dòng)效，他們兩個(gè)在一定程度上都展示了更友好的進(jìn)度效果。

在開(kāi)始分析功能前，首先我們先來(lái)考慮下我們的需求：動(dòng)效進(jìn)度條，也就是說(shuō)在原來(lái)的進(jìn)度條基礎(chǔ)上需要添加實(shí)時(shí)動(dòng)畫(huà)，讓進(jìn)度條看起來(lái)更炫酷一些，除了光效進(jìn)度條以外，還有一種延遲到達(dá)進(jìn)度條，也屬于動(dòng)態(tài)進(jìn)度條。

延遲動(dòng)效、說(shuō)直白一點(diǎn)兒就是延遲到達(dá)，當(dāng)我們?cè)O(shè)置了進(jìn)度從10%到20%時(shí)，程序模擬了一個(gè)漸進(jìn)的過(guò)程，使用一個(gè)時(shí)間段走完了這10%的進(jìn)度。

下面我們分別來(lái)介紹這兩種進(jìn)度條的實(shí)現(xiàn)

實(shí)現(xiàn)炫酷的進(jìn)度條我們可以從QWidget自定義開(kāi)始寫(xiě)，也就是說(shuō)從頭開(kāi)始寫(xiě)，但通常我們不這樣干，因?yàn)檫@樣可能會(huì)寫(xiě)出無(wú)窮無(wú)盡的bug，而且現(xiàn)有的輪子已經(jīng)很穩(wěn)定了，為什么還要造呢。

1、光效進(jìn)度條

光效進(jìn)度條我們使用了一個(gè)小技巧，采用一個(gè)簡(jiǎn)單的辦法實(shí)現(xiàn)，我們的光效進(jìn)度條控件繼承自Qt原生進(jìn)度條類(lèi)QProgressBar，在新類(lèi)中我們只需要在Qt繪制完原生進(jìn)度條之后，補(bǔ)畫(huà)動(dòng)效即可。

a、paintEvent函數(shù)

paintEvent函數(shù)是Qt的繪制函數(shù)，當(dāng)界面刷新的時(shí)候，這個(gè)接口函數(shù)就會(huì)被調(diào)用，因此我們需要重寫(xiě)這個(gè)接口，首先調(diào)用父窗口的繪制方法，然后我們?cè)诶L制我們自己的動(dòng)效，代碼如下所示

QProgressBar::paintEvent(event);
drawCache繪制動(dòng)效

b、drawCache繪制動(dòng)效

繪制動(dòng)效的時(shí)候，我們需要知道動(dòng)效的繪制區(qū)域，這個(gè)地方我們需要主動(dòng)去解析qss的一些參數(shù)，Qt的style()->subElementRect這個(gè)接口剛好可以拿到我們需要的信息

下面簡(jiǎn)單描述下我們的實(shí)現(xiàn)流程

• 首先我們獲取進(jìn)度條的幾何大小和中間進(jìn)度的幾何大小，這樣的話(huà)我們就可以計(jì)算出來(lái)各border的數(shù)值
• 然后根據(jù)我們當(dāng)前的value值就可以計(jì)算出進(jìn)度條已經(jīng)走過(guò)(就是值小于我們?cè)O(shè)定的區(qū)域)的幾何大小
• 我們的光效將是跑在第二步計(jì)算出來(lái)的區(qū)域上，一直循環(huán)迭代
• 內(nèi)存里我們維護(hù)一個(gè)cacheValue，這個(gè)值在每次界面刷新的時(shí)候遞增，但是不能大于第二步的value值，cacheValue將是我們動(dòng)效繪制的一個(gè)關(guān)鍵參數(shù)，他表示了動(dòng)效繪制的長(zhǎng)度
• 構(gòu)造一個(gè)漸變刷子，設(shè)置給QPainter
• 繪制動(dòng)效

上下大致描述了下繪制動(dòng)效的一個(gè)流程，下面送上具體代碼，由于篇幅原因，代碼我進(jìn)行了部分偽代碼處理。

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(構(gòu)造一個(gè)QMargins);

	QRectF rect(動(dòng)效繪制區(qū)域);

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

c、定時(shí)刷新

由于我們的動(dòng)效是需要主動(dòng)去刷新的，因此我們需要聲明一個(gè)定時(shí)器，然后定時(shí)去刷新，實(shí)現(xiàn)代碼可能像下面這樣

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

定時(shí)器只需要在我們第一次設(shè)置進(jìn)度條值的時(shí)候啟動(dòng)，或者當(dāng)我們?cè)O(shè)置一個(gè)新的值，而定時(shí)器沒(méi)有啟動(dòng)，我們就需要去激活定時(shí)器。

TM_CACHE模式即是我們的動(dòng)效模式，TM_SMOOTH模式則是我們的延遲到達(dá)模式

connect(this, &QProgressBar::valueChanged, [this](int value){//TM_CACHE模式下 啟動(dòng)動(dòng)畫(huà)時(shí)機(jī)
		if (!m_pCacheTimer->isActive() && value != 0 && TM_CACHE == m_mode)
		{
			m_pCacheTimer->start(m_iRefreshleveling);
		}
	});

動(dòng)效進(jìn)度條效果如下圖所示

2、延遲到達(dá)進(jìn)度條

動(dòng)效進(jìn)度條可能更適用于啟動(dòng)界面，但是也有一些時(shí)候，我們可能需要更平緩的一個(gè)加載曲線(xiàn)，例如安裝軟件、卸載軟件的時(shí)候。

a、setValue

延遲到達(dá)進(jìn)度條和動(dòng)效進(jìn)度條的實(shí)現(xiàn)方式就有所差別了，對(duì)于實(shí)現(xiàn)延遲到達(dá)進(jìn)度條，我們這里重寫(xiě)了setValue函數(shù)，當(dāng)外部調(diào)用該接口設(shè)置value值時(shí)，我們并沒(méi)有立即去設(shè)置當(dāng)前值，而是使用了一個(gè)時(shí)間段去完成這個(gè)值得刷新。

• 外部調(diào)用setValue時(shí)，我們首先計(jì)算出我們應(yīng)該繪制的最大寬度PixelMax、當(dāng)前已經(jīng)繪制到的最大寬度cacheValue和我們的步長(zhǎng)
• 設(shè)置定時(shí)器刷新頻率，并重啟定時(shí)器
• 定時(shí)器刷新時(shí)，cacheValue自增我們的步長(zhǎng)
• 調(diào)用父類(lèi)的QProgressBar::setValue接口設(shè)置值

b、定時(shí)器

延遲達(dá)到功能的的定時(shí)器和之前我們什么的動(dòng)效定時(shí)器可以混用一個(gè)，我們定時(shí)器刷新的時(shí)候，針對(duì)不同的動(dòng)畫(huà)模式，我們執(zhí)行不同的的代碼即可，實(shí)現(xiàn)代碼可能像下面這樣

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();
    }
});

延遲到達(dá)進(jìn)度條效果如下圖所示

3、接口說(shuō)明

光效進(jìn)度條類(lèi)對(duì)外只暴露了3個(gè)接口，分別是設(shè)置動(dòng)畫(huà)模式、動(dòng)畫(huà)時(shí)長(zhǎng)和刷新頻率

特別需要注意的是，我們這里重寫(xiě)了父類(lèi)的setValue接口，這意味著我們不能使用多態(tài)來(lái)操作這個(gè)接口

void setTransitionMode(TransitionMode mode);//設(shè)置動(dòng)畫(huà)模式
void setSmoothDuration(int duration);//設(shè)置刷新總時(shí)長(zhǎng) 模式為T(mén)M_SMOOTH時(shí)有效
void setRefreshleveling(int rate);//設(shè)置刷新頻率 每次更改TransitionMode之后會(huì)變?yōu)槟J(rèn)值

a、修改動(dòng)畫(huà)模式

修改動(dòng)畫(huà)模式的時(shí)候，我們需要清空內(nèi)存中的所有數(shù)據(jù)，并把value值設(shè)為0。

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

	m_mode = mode;
	clearData();

	QProgressBar::setValue(0);
}

b、其他接口

設(shè)置刷新時(shí)長(zhǎng)和頻率接口都比較簡(jiǎn)單，不做特別說(shuō)明

特別注意：這個(gè)3個(gè)接口最好是在動(dòng)畫(huà)啟動(dòng)前設(shè)置，動(dòng)畫(huà)開(kāi)始后盡量不要去調(diào)用

三、啟動(dòng)圖

第二節(jié)我們主要是講述了怎么做一個(gè)動(dòng)效進(jìn)度條，這一節(jié)我們來(lái)做一個(gè)啟動(dòng)圖頁(yè)面，把這個(gè)動(dòng)效使用進(jìn)去。

啟動(dòng)圖不是我們主要分析的內(nèi)容，這個(gè)我就簡(jiǎn)單說(shuō)下這個(gè)類(lèi)的實(shí)現(xiàn)方式和一些借口說(shuō)明

1、實(shí)現(xiàn)思路

Qt已經(jīng)給我們提供了一個(gè)QSplashScreen，但是使用起來(lái)還是特別有限，因此這里我把Qt的源碼直接進(jìn)行了二次開(kāi)發(fā)

• 首先Qt的原生實(shí)現(xiàn)方式基本都被移植了出來(lái)
• 啟動(dòng)圖使用了簡(jiǎn)單的上下布局，上面是一張我自繪制的圖片，放在了一個(gè)QLabel上，下面是動(dòng)效進(jìn)度條
• 自繪制的圖片上包括了，產(chǎn)品名稱(chēng)、logo、背景圖等等

2、背景圖切換

當(dāng)我們調(diào)用setPixmap設(shè)置背景圖時(shí)，如果我們指定了多張圖，我將會(huì)啟動(dòng)一個(gè)定時(shí)器，在指定時(shí)長(zhǎng)后重新構(gòu)造一張大的背景圖，并添加到啟動(dòng)窗口上

這里主要說(shuō)明下背景圖是怎么構(gòu)造出來(lái)的，代碼如下所示

a、根據(jù)背景圖構(gòu)造啟動(dòng)圖大小，并移動(dòng)到屏幕中間

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、繪制標(biāo)題欄

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、設(shè)置給QLabel背景圖

m_pWindowBackground->setPixmap(m_currentPixmap);

啟動(dòng)圖的效果這里就不在貼圖了，第三節(jié)上的兩個(gè)gif圖都是最終的啟動(dòng)圖效果

四、測(cè)試

最后就是測(cè)試代碼了，主要是模擬了程序的一個(gè)加載過(guò)程

1、構(gòu)造啟動(dòng)圖

首先我們構(gòu)造一個(gè)啟動(dòng)圖對(duì)象，并設(shè)置程序logo和動(dòng)畫(huà)模式

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

2、背景圖

設(shè)置背景圖，并設(shè)置背景圖更換時(shí)間間隔

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

3、其他信息

設(shè)置程序的提示信息和標(biāo)題欄

screen->showMessage("Established connections", 0);
screen->setTitle(QStringLiteral("廣聯(lián)達(dá)BIM土建計(jì)量GTJ2018"));

4、事件循環(huán)

這里寫(xiě)了一個(gè)死循環(huán)，主要是為了模擬程序的一個(gè)加載過(guò)程，每隔10ms處理下界面刷新事件

a.processEvents();

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

screen->finish(&w);

五、源碼

需要源碼的留郵箱，現(xiàn)在的csdn簡(jiǎn)直太坑爹了。。。

到此這篇關(guān)于Qt實(shí)現(xiàn)炫酷啟動(dòng)圖動(dòng)態(tài)進(jìn)度條效果的文章就介紹到這了,更多相關(guān)Qt動(dòng)態(tài)進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論