第二篇 RA8889 實現酷炫車載液晶儀表系列視頻： UI類界面介紹

Jackeyii

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

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

下圖是STM32+RA8889實現液晶儀表盤的效果：

正文

在PS軟件中，把基本的界面、以及UI圖片做好，本期主要講述PS軟件做好的圖片UI，通過Ae軟件實現動起來的效果。下圖界面則是設計好的靜態類UI，通過PS軟件制作好。

在PS軟件中做UI圖片設計，把每個元素放置到單獨的圖層中，并把元素對應的圖層命名好，調整好圖層的順序，界面中如轉速的刻度元素、數字、檔位等等，把所有的元素做好，需要哪個界面時，即可把小眼睛打開，再保存為圖片以供使用。這些是分類好的各個元素的圖層.

例如這次主要是實現指針轉動的效果，我們把指針的圖層特別標記出來。指針轉動的效果會在AE軟件中實現，然后把PS文件原檔導入到AE軟件中。

接下來我們到AE軟件中實現指針轉動的效果。

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

把PS軟件做好的文件拉到AE軟件中的項目中，導入材料選擇：合成；圖層選項選擇：可編輯的圖層樣式。點擊確定。

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

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

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

接下來介紹如何實現指針的轉動，找到兩個指針的圖層，按住Ctrl選中該兩個圖層，點擊會展開屬性參數內容，有位置、描點、旋轉、不透明度等屬性。

鼠標移動到旋轉參數，然后拉動鼠標把指針旋轉到起始為止。

拉完指針旋轉到對應位置如下圖

鼠標移動到旋轉前面的秒表，點擊給位置打上關鍵幀，秒表變藍則是打上了關鍵幀。

打上關鍵幀后，右邊時間區域上會出現菱形小圖標，如下圖

接著鼠標拖動時間線調到5秒的位置。

鼠標移動到旋轉屬性參數的位置，調整旋轉的角度到合適的位置，旋轉的位置數值會改變，指針會旋轉到相應的位置，時間線上會自動生成一個關鍵幀。

打上關鍵幀的作用是為了指針在起始幀與結束幀之間轉動的效果。

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

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

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

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

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

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

工具轉好圖片后，會生成三個文件，其中Bin文件是燒錄到FLASH中的圖片數據，XLSX是包含圖片的信息，.h文件是圖片數據的結構體，可放到程序代碼中，直接使用即可。

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

zmx212

不錯