大赛经验 - 长按膨胀按钮从构思到实现 · Issue #I4EKMZ · Gitee Community/OpenHarmony组件开发大赛-有奖征文

### 前言
今年7月中旬参加实习接触到OpenHarmony，开始学习使用DevEco Studio，适逢举办OpenHarmony组件开发大赛，自己学习了一段时间，想尝试着参与一下。
第一个首要的问题是设计什么样的组件，应用于什么场景，能够实现哪些功能，光是这几个问题想必就难到了各位参赛者，我也是想了很久都没能想出比较好的点子。
一天我在写项目中的某个长按事件时发现，onlongpress事件似乎不能设定长按的时间，而且绑定了长按事件的按钮在完成长按操作前后没有明显的样式变化，用户从中得到自己的长按操作正在执行的反馈很有限。这给了我设计开发的灵感，决定结合这些需求开发一个自定义长按按钮。

### 一、初步设计
首先是自定义长按操作的时间，原有的onlongpress方法是无法满足了，因此将长按操作拆分为按下和松开两个动作，按下时启动计时，松开时结束计时，并根据松开后计时器的值与设定的常量进行对比判断长按操作是否合规。
接下来的问题是以何种形式给予用户长按操作完成的反馈。这种反馈可以是视觉的、听觉的或是触觉的，听觉上可以是播报提示音，触觉上可以是震动，但这两个的应用场景都比较有针对性，且相对受限于环境，比如我就不习惯虚拟键盘的哒哒声，震动则感觉过于“正式”，所以选择较为平常的视觉反馈方式。
要用哪种形式上的视觉提示呢，动画、进度条、颜色渐变，我打算将这些结合起来。我想起水波纹的动画效果，看起来不错，如果再给这个波纹加个框又能起到进度条的效果，等完成长按就变色提示用户。接着我就画了张概念图，如下：

![设计初稿](https://images.gitee.com/uploads/images/2021/1020/092754_a66ee5a7_8082566.png "2自定义长按提示按钮 - .png")

### 二、开发

- #### 外圈显隐
确定了设计方案就开始开发，先将整个实现流程进行拆解，分为点击、松开两个动作，即在同一个按钮绑定ontouchstart和ontouchend两个事件。点击时显示外圈，按钮逐渐膨胀变大，变大到外圈大小时变色提示用户，用户松开按钮，启动事件。
之前在官方文档看到一个隐藏文本点击显示的Demo，受其启发设想外圈根据按钮点击或松开两种状态变化，点击时显示，松开时消失。使用渲染属性if加boolean类型变量的方式来控制外圈的显隐，发现在预览器上实际测试时外圈仅仅闪了一下就消失了。我以为是stack布局显示的问题，也有可能是该渲染属性不支持canvas组件的问题（后来才明白应该使用show渲染属性，虽然二者的描述很类似，但效果还是有区别的）。

![渲染属性](https://images.gitee.com/uploads/images/2021/1020/093407_fc1bad5d_8082566.png "渲染属性.png")

原本计划在初始化时将外圈画好，默认设置画布隐藏，待点击按钮时显现，松开时再隐藏。但画布组件的getContext方法并不支持在OnInit中调用。

![关于canvas的小tip](https://images.gitee.com/uploads/images/2021/1020/093514_8205d6ee_8082566.png "关于canvas1.png")

随后放弃使用渲染属性，转变思路，将“隐藏”改为“擦除”。原本是在hml文件的canvas组件中添加show属性，现在直接在js文件里对画布对象使用clearRect()方法删除指定区域内的绘制内容。点击按钮时在画布上画圈，松开按钮时擦除画布，从而实现显隐效果。

![clearRect擦除](https://images.gitee.com/uploads/images/2021/1020/093714_f4a25d3e_8082566.png "clearRect擦除.png")

- #### 膨胀动画
在开发过程中，我抛弃了原本计时器长按计时的方案，改为根据膨胀按钮的半径长度与外圈长度做对比判断。其中膨胀动画用到了API6的动画样式，当按住按钮时，膨胀动画持续播放，按钮慢慢变大，松开时反向播放恢复为初始状态。设定膨胀动画完整播放完所需的时间，成功完成长按操作，按钮膨胀到外圈大小后松开保持现有大小，需要设置动画对象的options属性参数，将其中的动画启停模式参数fill的值设为forwards。

![选择动画模式](https://images.gitee.com/uploads/images/2021/1020/093800_2a0c57fb_8082566.png "动画模式.png")

而中途松开按钮则重置按钮样式为初始大小，通过声明使用一个相反方向的重置动画属性集options2，将其中的播放时长参数duration设为0，瞬间完成重置动画，并将初始按钮大小的值赋给end参数。

![动画属性集](https://images.gitee.com/uploads/images/2021/1020/093859_9e4fb4dc_8082566.png "动画属性集.png")

- #### 完成提示
最后是长按操作完成的视觉提示，原先设想是完成长按操作时按钮变色提示，但在开发时出现问题不得不转变方案。为了方便解释我在此将按钮分为初始态（未点击），点击态（正被点击）两种状态，当我们点击按钮时按钮处于点击态，此时按钮的颜色会比初始态稍微深一点点，我们可以通过在对于的css文件中声明button-style:active样式来设定按钮点击态的颜色。按钮变色的目的是提示用户“已经完成长按操作，可以松开按钮”，但是按钮处于点击态的颜色遮挡了按钮初始态的颜色，所以即使按钮对应的颜色变量改变了，也只能看到点击态的按钮颜色，只有松开按钮后才看到变色后的初始态按钮颜色，这就相当于“马后炮”了。于是我决定改变方案，从按钮变色改为生成外圈阴影，也能达到视觉提示的目的。

![绘制阴影](https://images.gitee.com/uploads/images/2021/1020/094551_e021f1b4_8082566.png "绘制阴影.png")

### 三、最终效果
最后的成品尽管与最初的设计有些不同，但基本上满足了一开始的需求。为了方便动态图展示效果，参考了官方文档中自定义组件里父组件和子组件之间的参数传递的示例（这部分内容在赛前辅导的直播课里老师也有讲到，讲得挺详细的，大家可以去看视频学习），加了文本和日志打印用于显示按钮状态及事件进度，最终效果如下：

![最终效果](https://images.gitee.com/uploads/images/2021/1020/094749_abfc4e2d_8082566.gif "完整演示.gif")

Gitee Community/OpenHarmony组件开发大赛-有奖征文

内容风险标识

大赛经验 - 长按膨胀按钮从构思到实现

评论 (0)

Gitee Community/OpenHarmony组件开发大赛-有奖征文 .gitee-modal { width: 500px !important; }

内容风险标识

大赛经验 - 长按膨胀按钮从构思到实现

评论 (0)

搜索帮助

Gitee Community/OpenHarmony组件开发大赛-有奖征文