OpenHarmony弹窗怎样设置动画

在 OpenHarmony（ArkUI） 中，弹窗的动画设置主要取决于你使用的是哪种弹窗方式。下面按常见场景给你说明。

一、使用 CustomDialog 设置动画（推荐）

1. 基本用法

@CustomDialog
struct MyDialog {
  controller: CustomDialogController

  build() {
    Column() {
      Text('这是一个弹窗')
      Button('关闭')
        .onClick(() => {
          this.controller.close()
        })
    }
    .width('80%')
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(10)
  }
}

2. 设置进入 / 退出动画

通过 CustomDialogController 的 openAnimation 和 closeAnimation：

private dialogController: CustomDialogController = new CustomDialogController({
  builder: MyDialog(),
  openAnimation: {
    duration: 300,
    curve: Curve.EaseOut,
    delay: 0
  },
  closeAnimation: {
    duration: 200,
    curve: Curve.EaseIn
  },
  alignment: DialogAlignment.Center
})

✅ 支持参数：

• duration：动画时长（ms）
• curve：动画曲线（Ease / Linear / EaseIn 等）
• delay：延迟时间

二、弹窗内容自身加动画（更灵活）

如果你想要 缩放、位移、透明度变化，可以在 build() 中用动画 API：

@CustomDialog
struct MyDialog {
  @State scaleValue: number = 0.8
  controller: CustomDialogController

  aboutToAppear() {
    animateTo({ duration: 300, curve: Curve.EaseOut }, () => {
      this.scaleValue = 1
    })
  }

  build() {
    Column() {
      Text('动画弹窗')
    }
    .scale({ x: this.scaleValue, y: this.scaleValue })
    .opacity(this.scaleValue)
  }
}

三、使用 AlertDialog（系统弹窗，动画有限）

AlertDialog.show({
  title: '提示',
  message: '这是一个系统弹窗',
  confirm: {
    value: '确定',
    action: () => {}
  }
})

⚠️ AlertDialog 不支持自定义动画，只能使用系统默认动画。

四、使用 @Entry + Stack 模拟弹窗（完全可控）

适合需要复杂动画的场景：

Stack() {
  if (this.showDialog) {
    Column() {
      Text('自定义弹窗')
    }
    .animation({ duration: 300 })
    .scale({ x: 1, y: 1 })
  }
}

总结建议

如果你用的是 OpenHarmony 3.x / 4.x 或 ArkTS / JS 开发，可以告诉我具体版本，我可以给你更精确的示例。