HarmonyOS ArkUI 动画实战：属性动画、显式动画与转场

一、动画不是装饰，是信息

好的动画让用户理解“发生了什么”：点击后按钮下沉表示已被接收，列表项插入时滑入表示新增位置，页面返回时旧页面淡出表示层级关系。ArkUI 提供了属性动画、显式动画、转场动画三类入口，选错类型会让代码又长又难维护。

二、属性动画：只改属性值

属性动画最简单：给属性赋新值时声明动画参数，框架自动插值。

@State expanded: boolean = false;

Button('展开')
  .width(this.expanded ? 240 : 120)
  .animation({ duration: 300, curve: Curve.EaseInOut })
  .onClick(() => { this.expanded = !this.expanded; })

注意 .animation() 只对其前面的属性生效，且必须写在属性之后。常见错误是把 animation 写在容器外层，然后困惑为什么子元素没有过渡——子元素的属性变化需要各自的 animation 声明，或改用显式动画统一驱动。

三、显式动画：一次驱动多个属性

当一次交互需要同时改变多个组件的多个属性时，使用 animateTo 包住状态修改，作用域内的所有变化共享同一套动画参数。

animateTo({ duration: 260, curve: Curve.FastOutSlowIn }, () => {
  this.offsetY = 0;
  this.opacity = 1;
  this.scale = 1;
});

显式动画的价值在于“一次状态变更 = 一个连贯动作”，避免多个属性各自为政、时长不一致造成的割裂感。

四、转场动画：页面与元素的进出

页面转场通过 pageTransition 声明进入与退出效果，组件出现消失用 transition。列表项增删建议配合 transition 的 Insert/Delete 类型：

@State items: string[] = [];

Column() {
  ForEach(this.items, (item: string) => {
    Text(item)
      .transition({ type: TransitionType.Insert, translateX: -24, opacity: 0 })
  })
}

五、性能与体验的三条红线

1. 只动“便宜”的属性。 transform（位移、缩放、旋转）与 opacity 由渲染管线高效处理；频繁改变 width、height、margin 会触发布局重算，长列表里尤其明显。
2. 时长控制在 150~350ms。 过短用户感知不到，过长显得拖沓。同层级动画使用统一曲线，避免忽快忽慢。
3. 尊重系统设置。 系统开启“减少动态效果”时，应降低或关闭非必要动画，这是无障碍体验的一部分。

六、手势与动画的配合

拖拽、滑动类交互建议使用“跟手”方案：手势进行中直接更新位移（不设动画），松手后再用动画吸附到目标位置。这样既有实时反馈，又有确定的收尾动作。

PanGesture()
  .onActionUpdate((event: GestureEvent) => {
    this.offsetY = event.offsetY; // 跟手，不加动画
  })
  .onActionEnd(() => {
    animateTo({ duration: 200, curve: Curve.EaseOut }, () => {
      this.offsetY = 0; // 吸附
    });
  })

七、小结

属性动画解决“单个属性的平滑变化”，显式动画解决“多个属性的一次协同”，转场动画解决“页面与列表项的进出”。优先使用 transform 与 opacity，控制时长与曲线的一致性，并在手势场景做到“跟手 + 吸附”。动画做得克制而准确，比堆特效更能提升产品质感。