HarmonyOS 自定义弹窗的显示和消失动画？

Question

创建了一个custom dialog, 显示时用了动画 TransitionEffect.OPACITY.combine(TransitionEffect.move(TransitionEdge.END)).animation({curve: curves.springMotion()}) ，能从屏幕右侧滑动出现消失时，调用 this.controller.close(); 动画是默认（逐渐消失），怎么让消失时有显示时相反的效果（滑动回屏幕右侧）

Answer 1

demo：

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  @State showFlag: Visibility = Visibility.Visible;

  private effect: TransitionEffect =
    // 创建默认透明度转场效果,并指定了springMotion(0.6, 0.8)曲线
    TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.8) })
      // 通过combine方法,这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 0.8)
      .combine(TransitionEffect.scale({ x: 0, y: 0 }))
        // 添加旋转转场效果，这里的动画参数会跟随上面带animation的TransitionEffect，也就是springMotion(0.6, 0.8)
      .combine(TransitionEffect.rotate({ angle: 90 }))
        // 添加平移转场效果，这里的动画参数使用指定的springMotion()
      .combine(TransitionEffect.translate({ y: 150 }).animation({ curve: curves.springMotion() }))
        // 添加move转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion()
      .combine(TransitionEffect.move(TransitionEdge.END))

  build() {
    Column() {
      Button("关闭弹窗")
    }
    .width("100%")
    .height(400)
    .backgroundColor(Color.Gray)
    .onClick(() => {
      this.cancel();
    })
    .visibility(this.showFlag)
    .transition(this.effect)
  }

  cancel() {
    this.showFlag = Visibility.Hidden
    setTimeout(() => {
      this.controller.close()
    }, 400)
  }
}

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
    autoCancel: false,
    customStyle: true
  })

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }
    .width('100%')
    .height('100%')
  }
}