第二篇 RA8889 實(shí)現(xiàn)酷炫車(chē)載液晶儀表系列視頻： UI類(lèi)界面介紹

Jackeyii

引言
視頻介紹版本：https://www.bilibili.com/video/BV1aD29YhEjh/

本系列文章介紹 RA8889 實(shí)現(xiàn)液晶儀表HMI UI界面，分為兩大部分來(lái)介紹，本期介紹如何制作UI類(lèi)界面，其中包括使用PS軟件制作靜態(tài)類(lèi)UI界面，Ae軟件制作動(dòng)態(tài)類(lèi)的UI：指針轉(zhuǎn)動(dòng)的處理；瑞佑公司轉(zhuǎn)圖Tool對(duì)UI圖片處理。下期會(huì)介紹如何通過(guò)代碼實(shí)現(xiàn)車(chē)載儀表指針的轉(zhuǎn)動(dòng)。

下圖是STM32+RA8889實(shí)現(xiàn)液晶儀表盤(pán)的效果：

正文

在PS軟件中，把基本的界面、以及UI圖片做好，本期主要講述PS軟件做好的圖片UI，通過(guò)Ae軟件實(shí)現(xiàn)動(dòng)起來(lái)的效果。下圖界面則是設(shè)計(jì)好的靜態(tài)類(lèi)UI，通過(guò)PS軟件制作好。

在PS軟件中做UI圖片設(shè)計(jì)，把每個(gè)元素放置到單獨(dú)的圖層中，并把元素對(duì)應(yīng)的圖層命名好，調(diào)整好圖層的順序，界面中如轉(zhuǎn)速的刻度元素、數(shù)字、檔位等等，把所有的元素做好，需要哪個(gè)界面時(shí)，即可把小眼睛打開(kāi)，再保存為圖片以供使用。這些是分類(lèi)好的各個(gè)元素的圖層.

例如這次主要是實(shí)現(xiàn)指針轉(zhuǎn)動(dòng)的效果，我們把指針的圖層特別標(biāo)記出來(lái)。指針轉(zhuǎn)動(dòng)的效果會(huì)在AE軟件中實(shí)現(xiàn)，然后把PS文件原檔導(dǎo)入到AE軟件中。

接下來(lái)我們到AE軟件中實(shí)現(xiàn)指針轉(zhuǎn)動(dòng)的效果。

打開(kāi)AE軟件，新建合成，設(shè)定好對(duì)應(yīng)的參數(shù)，打開(kāi)AE軟件，新建合成，設(shè)定好對(duì)應(yīng)的參數(shù)，如合成的寬度x高度，與PS軟件中的UI圖片一致，幀率可根據(jù)需求來(lái)選擇，時(shí)間總長(zhǎng)設(shè)為5秒鐘，點(diǎn)擊確定。

把PS軟件做好的文件拉到AE軟件中的項(xiàng)目中，導(dǎo)入材料選擇：合成；圖層選項(xiàng)選擇：可編輯的圖層樣式。點(diǎn)擊確定。

在項(xiàng)目欄中就會(huì)出現(xiàn)在PS軟件做好的圖層分類(lèi)的樣式，然后把圖層按照順序拉動(dòng)到左下角的編輯窗口。

在合成編輯窗口按照排列好的順序整理好。

界面需要的元素通過(guò)點(diǎn)擊小眼睛讓其顯示出來(lái)，操作完后就可以在AE的界面看到整個(gè)儀表指針的預(yù)覽圖。

接下來(lái)介紹如何實(shí)現(xiàn)指針的轉(zhuǎn)動(dòng)，找到兩個(gè)指針的圖層，按住Ctrl選中該兩個(gè)圖層，點(diǎn)擊會(huì)展開(kāi)屬性參數(shù)內(nèi)容，有位置、描點(diǎn)、旋轉(zhuǎn)、不透明度等屬性。

鼠標(biāo)移動(dòng)到旋轉(zhuǎn)參數(shù)，然后拉動(dòng)鼠標(biāo)把指針旋轉(zhuǎn)到起始為止。

拉完指針旋轉(zhuǎn)到對(duì)應(yīng)位置如下圖

鼠標(biāo)移動(dòng)到旋轉(zhuǎn)前面的秒表，點(diǎn)擊給位置打上關(guān)鍵幀，秒表變藍(lán)則是打上了關(guān)鍵幀。

打上關(guān)鍵幀后，右邊時(shí)間區(qū)域上會(huì)出現(xiàn)菱形小圖標(biāo)，如下圖

接著鼠標(biāo)拖動(dòng)時(shí)間線調(diào)到5秒的位置。

鼠標(biāo)移動(dòng)到旋轉(zhuǎn)屬性參數(shù)的位置，調(diào)整旋轉(zhuǎn)的角度到合適的位置，旋轉(zhuǎn)的位置數(shù)值會(huì)改變，指針會(huì)旋轉(zhuǎn)到相應(yīng)的位置，時(shí)間線上會(huì)自動(dòng)生成一個(gè)關(guān)鍵幀。

打上關(guān)鍵幀的作用是為了指針在起始幀與結(jié)束幀之間轉(zhuǎn)動(dòng)的效果。

快捷鍵Ctrl+M，調(diào)出渲染配置界面。輸出模塊設(shè)置格式選擇"JPEG"序列，輸出到即是保存的位置，點(diǎn)擊渲染，等待渲染完成。

渲染完成后，會(huì)得到JPEG圖片，指針轉(zhuǎn)動(dòng)的多少取決于設(shè)定的幀數(shù)，設(shè)定幀數(shù)越高，得到的JPEG圖片越多，指針轉(zhuǎn)動(dòng)起來(lái)越平順，絲滑，效果更好。

以上的操作，通過(guò)PS軟件，做好靜態(tài)的UI界面，把UI顯示所需的各個(gè)狀態(tài)的圖片做好，然后保存為JPEG圖片。通過(guò)AE軟件，做好動(dòng)態(tài)類(lèi)的UI界面，把UI顯示的各個(gè)狀態(tài)的動(dòng)態(tài)顯示的圖片渲染好，保存為JPEG圖片。

接下來(lái)我們講解如何配套瑞佑科技提供的轉(zhuǎn)圖工具，轉(zhuǎn)為對(duì)應(yīng)的JPEG格式的圖片，以及燒錄到FLASH中的Bin文檔。

電腦端打開(kāi)瑞佑公司的圖片管理工具： RAiO Image Tool ，選擇菜單欄的 Tools ，對(duì)應(yīng)的參數(shù)均選為最大，轉(zhuǎn)出來(lái)的圖片質(zhì)量就越好，選擇AE軟件渲染出來(lái)的圖片，轉(zhuǎn)為RA8889芯片能識(shí)別的圖片格式。點(diǎn)擊Load Pictures，把轉(zhuǎn)好的JPEG轉(zhuǎn)圖全部加載進(jìn)來(lái)。重命名是YUV444_q100則是工具轉(zhuǎn)好的JPEG格式的圖片。

再把JPEG打包為Bin檔，工具會(huì)生成對(duì)應(yīng)的圖片信息，這些信息寫(xiě)代碼的時(shí)候會(huì)用到，關(guān)于工具的使用說(shuō)明有專(zhuān)門(mén)的說(shuō)明文檔，這里不做多說(shuō)明。

工具轉(zhuǎn)好圖片后，會(huì)生成三個(gè)文件，其中Bin文件是燒錄到FLASH中的圖片數(shù)據(jù)，XLSX是包含圖片的信息，.h文件是圖片數(shù)據(jù)的結(jié)構(gòu)體，可放到程序代碼中，直接使用即可。

下期文章我們介紹軟件部分Demo效果代碼實(shí)現(xiàn)的過(guò)程，先介紹瑞佑公司的RA8889初始化。我們下期再見(jiàn)。