#鸿蒙通关秘籍#在HarmonyOS Next应用中实现自定义弹窗组件的动画效果

Stack() {
  Column() {
    // Background overlay
  }
  .transition(
    TransitionEffect.OPACITY.animation({
      duration: 300,
      curve: Curve.Friction
    })
  )

  Column() {
    // Dialog content
  }
  .transition(
    this.dialogOptions?.animation ?
      this.dialogOptions?.animation :
    TransitionEffect.scale({ x: 0, y: 0 }).animation({
      duration: 300,
      curve: Curve.Friction
    })
  )
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

Stack() {
  Column() {
    // Background overlay
  }
  .opacity(this.opacityNum)
  .onClick(() => {
    animateTo({
      duration: 200,
      curve: Curve.Friction,
      onFinish: () => {
        this.dialogOptions?.instance?.close();
      }
    }, () => {
      this.opacityNum = 0;
      if (this.dialogOptions?.styles?.align === Alignment.Bottom) {
        this.translateY = "100%";
      }
    })
  })

  Column() {
    // Dialog content
  }
  .translate({ x: 0, y: this.translateY })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.