OpenHarmony动画怎么实现

在 OpenHarmony（ArkUI） 中，动画实现方式主要有 声明式动画（推荐） 和 命令式动画 两类。下面按常见使用场景给你梳理一下。

一、声明式动画（ArkUI 推荐方式）

1️⃣ 属性动画（最常用）

通过 .animation() 对组件属性变化做动画。

@Entry
@Component
struct AnimationDemo {
  @State widthSize: number = 100

  build() {
    Column() {
      Button('放大')
        .width(this.widthSize)
        .height(100)
        .backgroundColor(Color.Blue)
        .animation({
          duration: 1000,
          curve: Curve.EaseInOut,
          iterations: 1,
          playMode: PlayMode.Normal
        })
        .onClick(() => {
          this.widthSize = 200
        })
    }
  }
}

✅ 支持的属性：

• width / height
• opacity
• backgroundColor
• translate / scale / rotate（配合属性）

2️⃣ 显式动画（animateTo）

用于多个状态变化统一动画

Button('动画')
  .onClick(() => {
    animateTo({
      duration: 500,
      curve: Curve.Ease
    }, () => {
      this.widthSize = 200
      this.opacityVal = 0.5
    })
  })

二、组件内置动画能力

3️⃣ 列表 / 容器动画

• List 的 itemAppear / itemDisappear
• Swiper 自带切换动画
• Tabs 切换动画

三、转场动画（页面 / 组件）

4️⃣ 组件转场 transition

if (this.show) {
  Text('Hello')
    .transition({ type: TransitionType.Insert, opacity: 0 })
}

5️⃣ 页面转场

router.pushUrl({
  url: 'pages/Detail'
})

可配合 pageTransition() 使用。

四、命令式动画（高级）

6️⃣ 使用 animation 对象（JS / eTS）

import animator from '@ohos.animator'

let anim = animator.create({
  duration: 1000,
  easing: 'ease',
  fill: 'forwards',
  begin: 0,
  end: 100
})

anim.onframe = (value) => {
  this.x = value
}
anim.play()

适合：

• 复杂动画
• 帧动画
• 物理动画

五、常见动画类型对照

六、建议

✅ 新手：用 .animation()
✅ 多状态：用 animateTo
✅ 页面切换：用 pageTransition
✅ 游戏 / 复杂：用 animator

如果你有 具体场景（比如：按钮放大、列表滑动、登录页动画），我可以直接给你写完整示例。