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

Jackeyii

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

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

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

正文

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

zmx212

不錯(cuò)