RT-thread 柿饼UI demo实现 ---- 末日求生设备

一、背景

这是柿饼UI入门课程第二周的附加题作业。作业要求如下：

• 参考下图原型设计图，制作末日救生辅助系统应用。部分应用参考视频效果。
  此次作业希望能做出科技感和末日恐惧感。
  

二、实现

重要的是题目要求的三个功能的实现。重点讲讲是如何实现的。

2.1、幽灵探测器 --》 雷达扫描效果

效果如下：

雷达的实现，工程文件如下：

雷达扫描主题是用Clock控件实现，雷达框就是找个类似的背景图片，而扫描指针就是将一个半透明的图片放入秒针的图片位置，设置一个定时器让其旋转即可。
小红点选择的控件是button控件，主要是为了实现点击然后右边能够显现出探测到生物的图形和名称。
至于闪烁是根据扫描的指针值来让其在规定范围内跳动。

2.2、心率仪

效果如下：

工程文件如下布局：

主要是心跳的实现，是使用 canvas 画布来实现的，我只是使用其画出折线的效果，模拟一下心电图。
值得注意的是，要使用JS 帧动画的方式（详情看柿饼UI设计器帮助文档）替代定时器来实现轨迹更新，这样不容易卡死。

2.3、安全营地

效果如下：

工程文件布局如下：


使用的是listctrl+custompanel来实现安全区列表的滑动效果。
地图上的定位点是使用button控件，主要是用于点击后交互，我还是很喜欢这个控件。

2.5、更多功能

别的功能都很简单，见视频。

三、效果

其实是花了点时间剪辑，不过片头搞长了。。。

哔哩哔哩地址：RT-thread 柿饼UI demo – 末日设备