鸿蒙UI开发——基于onTouch事件实现表情选择胶囊

1、背 景

有朋友留言说，抖音APP中，长按评论按钮触发的快捷表情选择胶囊动画比较好（效果如下图），希望使用鸿蒙ArkTs也实现一个类似的。

本文在鸿蒙ArkTs下也实现一个类似的效果，如下：

首先，核心交互流程与抖音APP保持一致，即：

1. 1. 长按一个按钮，我们可以在按钮旁边生成一个快捷表情选择胶囊；

   2. 手指可以快捷的在候选表情上滑动，在选中的表情上停留时，该表情会稍微放大；

动画细节上做了一些个人效果，例如：

• 胶囊展示到界面时，候选表情做了一个类似IOS解锁时的类飞入效果；

• 我们在表情胶囊上滑动选择时，整个表情胶囊不会随着动画效果的改变发生宽度抖动。

下面开始介绍如何实现，文末有源代码，有需要的同学自取。

2、问题分析

上述的交互效果其实难点并不在于动画效果，在于onTouch事件的管理，因为，我们在长按评论按钮时，此时系统将会分配事件流给评论按钮消费。

如果我们想在用户不松手移动到其他位置，让其他组件也生效，实现过程将稍微复杂一些。

本文的实现思路是：监听评论按钮的onTouch事件，在事件move过程中，实时获取该事件的发生坐标，基于坐标去判断坐落的表情包位置，从而控制焦点放大效果。

📢📢注意 onTouch事件的调试千万要在真机或者模拟器中执行，在预览器中执行可能会出现非预期的问题。

❓我们怎么获取指定组件的坐标呢？

虽然我们通过onTouch事件可以知道用户手指的位置，那我们还有一个问题没解决，就是怎么知道各个表情包的坐标呢？

ArkTs为我们提供了一个API，根据组件ID获取组件实例对象, 通过组件实例对象将获取的坐标位置和大小同步返回给调用方，接口如下：

import { componentUtils } from '@kit.ArkUI';// 调用方式let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById("id");

3、布 局

布局比较简单，在本文中，将整个表情胶囊用一个Row包裹，另外，评论图标与表情胶囊整体属于在一个Row中。示意图如下：

为了方便动态插拔，我们将图标资源集合使用一个数组来动态维护，资源类型定义与数组定义如下：​​​​​​​

interface CommentIconInfo {
  
    source: Resource,  id: string;}const commentIcons: Array<CommentIconInfo> =  [    {
  
        id: 'page_main_icon1',      source: $r('app.media.send_you_a_little_red_flower'),    },    {
  
        id: 'page_main_icon2',      source: $r('app.media.powerful'),    },    {
  
        id: 'page_main_icon3',      source: $r('app.media.send_heart'),    }, {
  
      id: 'page_main_icon4',    source: $r('app.media.surprise'),  },  ]

布局代码如下：​​​​​​​

build() {
  
    Column() {
  
      Row() {
  
        Row() {