柿饼UI 入门课程作业第二周附加题 -- 《末日设备》

发布于 2020-12-16 20:48:15 浏览：767 订阅该版

[tocm]

### 前言
这是柿饼UI入门课的第二周作业。
基本题的实现见视频：[柿饼入门课程第二周 -- 基础作业](https://www.bilibili.com/video/BV1ZX4y1M78Q/)，照着课程视频做的，
按照视频一步一步做就OK了。

下面是附加题 -- 末日设备。

### 一、背景
这是柿饼UI入门课程第二周的附加题作业。作业要求如下：
>参考下图原型设计图，制作末日救生辅助系统应用。部分应用参考视频效果。
此次作业希望能做出科技感和末日恐惧感。
![img](https://oss-club.rt-thread.org/uploads/20220714/9c2243f17c4553c1da0b8874738d1eefd5edadbe.png)
### 二、实现
重要的是题目要求的三个功能的实现。重点讲讲是如何实现的。
#### 2.1、幽灵探测器  --》 雷达扫描效果
效果如下：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/6758dfde8da6de397c663c68a6a1f9d639bca342.gif)
雷达的实现，工程文件如下：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/1335b39ffda6f43a6d91f92b5813b0dbce94c9d1.png)
雷达扫描主题是用Clock控件实现，雷达框就是找个类似的背景图片，而扫描指针就是将一个半透明的图片放入秒针的图片位置，设置一个定时器让其旋转即可。
小红点选择的控件是button控件，主要是为了实现点击然后右边能够显现出探测到生物的图形和名称。
至于闪烁是根据扫描的指针值来让其在规定范围内跳动。

#### 2.2、心率仪
效果如下：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/8bee664d9317bff4134016e461b000f88fe90546.gif)
工程文件如下布局：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/93e5a5923efde2d2445dca6333b87c478097594c.png)
主要是心跳的实现，是使用 canvas 画布来实现的，我只是使用其画出折线的效果，模拟一下心电图。
值得注意的是，要使用JS 帧动画的方式（详情看柿饼UI设计器帮助文档）替代定时器来实现轨迹更新，这样不容易卡死。

#### 2.3、安全营地
效果如下：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/36b978f8deaf85a08dec504073a1047f384a5678.gif)
工程文件布局如下：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/3156171c5d4ab0c3be33fd0c57d5d8ab2b0b57a0.png)
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/a9c6226b4a5b4c40d6dfbcde8255263f6ff54ca2.png)
使用的是`listctrl`+`custompanel`来实现安全区列表的滑动效果。
地图上的定位点是使用button控件，主要是用于点击后交互，我还是很喜欢这个控件。

#### 2.5、更多功能
别的功能都很简单，见视频。

### 三、效果
其实是花了点时间剪辑，不过片头搞长了。。。

哔哩哔哩地址：[RT-thread 柿饼UI demo -- 末日设备](https://www.bilibili.com/video/BV1KT4y1u74B/)