鸿蒙ArkUI动画实战：TransitionEffect实现元素显隐过渡

鸿蒙ArkUI动画实战：TransitionEffect实现元素显隐过渡

一、功能概述
本案例通过ArkUI声明式范式，实现了一个带有组合动画效果的按钮显隐切换功能。点击"切换"按钮时，目标元素会以透明度变化、缩放、旋转、位移等多重动画组合的方式呈现或消失，效果流畅且富有视觉层次感。

二、实现原理与核心代码解析

@Component
@Entry
struct Index {
  @State
  isShow: boolean = false
  effect: object = TransitionEffect.OPACITY.animation({})
    .combine(TransitionEffect.scale({ x: 0, y: 0 }))
    .combine(TransitionEffect.rotate({ angle: 90 }))
    .combine(TransitionEffect.move(TransitionEdge.END))

  build() {
    Column() {
      Button('切换')
        .onClick(() => { this.isShow = !this.isShow })

      if (this.isShow) {
        Button("需要动画的元素").transition(this.effect)
      }
    }
    // 布局属性...
  }
}

关键实现步骤解析：

1. 动画配置对象
   通过TransitionEffect链式组合多个动画：

   • OPACITY：元素透明度从0到1渐变
   • scale：缩放动画（x/y轴从0缩放到原始尺寸）
   • rotate：旋转90度动画
   • move：元素从屏幕右侧滑入

2. 状态驱动机制
   @State装饰的isShow变量控制元素显隐，状态变化时自动触发动画过渡。当isShow变为true时执行进入动画，变为false时执行反向消失动画。

3. 动画绑定
   通过.transition()方法将组合动画效果绑定到目标元素，实现声明式动画配置。

三、效果扩展建议

1. 参数调优
   通过animation()方法配置动画参数：

   TransitionEffect.OPACITY.animation({
     duration: 1000, // 动画时长（ms）
     curve: Curve.EaseOut // 使用缓动曲线
   })
   

2. 组合更多效果
   可添加translate位移、blur模糊等效果，或通过onFinish回调实现动画序列控制。

3. 手势交互扩展
   结合PanGesture手势，实现拖动元素时实时更新位置，释放后触发弹性回流动画。

四、开发注意事项

1. 确保动画元素位于if条件语句中，显隐变化才能触发过渡
2. 组合动画的执行顺序由代码书写顺序决定
3. 复杂动画建议使用animateTo显式动画实现更精细的控制

该方案展示了鸿蒙声明式UI在动画实现上的简洁性和高效性，通过状态驱动与效果组合，开发者无需关注底层实现细节即可快速构建高质量交互动效。