第二篇 RA8889 实现酷炫车载液晶仪表系列视频： UI类界面介绍

视频介绍版本：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初始化。我们下期再见。

审核编辑 黄宇