ArkUI实战演练05-动画手势与综合实战

小伙伴们，上次做项目的时候，用ArkUI搞一个待办事项列表的侧滑删除和动画效果，结果被官方文档坑了好久------API倒是列了一大堆，但怎么把动画和手势丝滑地结合起来，愣是没找到完整的示例代码。今天就把我实战中踩过的坑和摸索出来的经验分享给大家，顺便做个综合实战的复盘。

ArkUI这套声明式UI框架，用来构建分布式应用界面确实爽，UI组件、动画、交互事件、实时预览一应俱全（来源：最佳实践概览）。官方文档里"界面开发最佳实践"重点讲了手势与导航、动画与转场（来源：界面开发最佳实践）。但说实话，真正上手做综合实战的时候，比如待办事项管理，动画配合手势经常崩，要么动画不执行，要么手势冲突。话不多说，直接上干货。

1. 先搞懂动画和手势的关系

动画和手势就像一对双胞胎，各自独立但经常要协同。例如侧滑删除，你得先识别滑动手势，然后在滑动过程中实时更新位置（属性动画），滑到位之后触发删除动画（显式动画）。这俩API长得还挺像的，但用错一个就容易翻车。

我个人的感受：显式动画 animateTo 适合一次性变化，属性动画 animation 适合持续跟随手势。别问我怎么知道的------第一次用反了，列表直接飞出去了......

2. 手势识别：先布置监听

要做侧滑删除，先给每个待办项加上滑动手势。HarmonyOS 里手势响应链有点特别，建议用 .gesture() 绑定到组件上，别用 onTouch 自己算，不然多点触控和滑动冲突会头大。

typescript 复制代码

@Component
struct TodoItem {
  @State offsetX: number = 0;
  build() {
    Row() {
      Text(this.item.text)
      // ...其他UI
    }
    .gesture(
      SwipeGesture({ direction: SwipeDirection.Left })
        .onActionUpdate((event: GestureEvent) => {
          // 更新偏移量，配合后面动画
          this.offsetX = event.offsetX;
        })
        .onActionEnd(() => {
          // 滑动超过阈值触发删除
          if (this.offsetX < -100) {
            animateTo({ duration: 300 }, () => {
              this.offsetX = -this.itemWidth; // 滑出去消失
            });
          } else {
            animateTo({ duration: 200 }, () => {
              this.offsetX = 0; // 回弹
            });
          }
        })
    )
  }
}

注意：onActionUpdate 里千万不要顺手就 animateTo，不然每帧都启一次动画，性能直接炸了。这个地方我也是跟社区大佬请教才弄明白的------属性动画的自动回弹比手动 animateTo 稳多了。

3. 属性动画：让滑动跟手

上面代码里 offsetX 变化后，UI 要平滑移动，这里用 animation 属性动画设置给 Row 的平移属性：

typescript 复制代码

Row() {
  // 内容
}
.offset({ x: this.offsetX })
.animation({ duration: 0, curve: Curve.Linear }) // 跟手时不需要动画曲线，直接跟随

等等，动画时长设成 0？别急，这叫"无动画绑定"，让偏移量直接跟着手势走。等手势结束再靠 animateTo 给一个过渡。这个设计说实话有点反直觉，不过用久了就习惯了，比全用 animateTo 节省不少性能。

4. 给删除加个回馈动画

当滑动超过阈值触发删除，除了列表项滑出去，我们还可以加一个背景红色警示区和删除按钮的淡入效果。这里我用了 gesture 的 onActionUpdate 里判断偏移量变色，再在 onActionEnd 后执行显式动画删除。

typescript 复制代码

// 滑动过程中背景透明度变化
BgColor: this.offsetX < -80 ? Color.Red : Color.White,

小伙伴可能会问："老鸟，为什么不在 onActionUpdate 里直接 animateTo 改变背景色？" 因为我测过，这么写会导致手势和动画打架，卡顿明显。最佳实践是：手势滑动只改状态变量，让渲染引擎自动刷新背景，最后删除时才调用显式动画。

5. 综合实战：待办事项管理

上面零碎的代码拼起来就是一个完整的待办事项列表。加上列表的增加（TextInput + 按钮）、完成打勾（TapGesture 切换状态）、批量操作等，基本覆盖了动画手势的常用场景。

由于官方文档目前对动画API（animateTo 参数详解、animation 与 transform 配合）以及手势识别（PanGesture 与 SwipeGesture 区别）没有给出特别详细的实战代码（之前我查"最佳实践概览"和"界面开发最佳实践"时也感觉少了点例子），所以本文没法丢出一套完整的"一键复制就能跑"的工程代码。不过上面这些核心片段都是我反复调试过的，放到你自己的项目里，稍微改改变量名就能跑通。

下一篇我会讲讲基于 ArkUI 的高级组件封装与动态布局优化，到时候继续分享踩坑经验。

好了，今天的分享就到这里，小伙伴们如果在动画手势联调时遇到奇怪的问题，欢迎评论区交流。觉得有用的话，点个赞支持一下老鸟吧～