HarmonyOS CustomDialog是否可以实现类似半模态的出场动画效果？

Question

如题：HarmonyOS CustomDialog是否可以实现类似半模态的出场动画效果？

Answer 1

自定义弹窗实现动画可以通过组件内转场实现，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-transition-animation-component-V5

目前暂不支持修改半模态bindSheet弹出视图的顶部圆角，可自定义实现参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5\#customdialogcontrolleroptions对象说明

参考示例如下：

let anmDuration: number = 1000; // 弹窗交互

@CustomDialog
struct CustomDialogExample1 {
  controller: CustomDialogController;
  @Link showFlag: Visibility;
  // @State showFlag: Visibility = Visibility.Visible;
  @State isAutoCancel: boolean = false;
  textController: TextAreaController = new TextAreaController()

  build() {
    Column() {
      Row() {
        Text("自定义动画的弹窗")
      }
      .padding(8)
      .backgroundColor('#FFFFFF')
      .height(200)
      .margin({ bottom: 30 })
      .width('90%')
      .borderRadius({
        topLeft: 10,
        topRight: 10,
        bottomRight: 0,
        bottomLeft: 0
      })
    }
    .justifyContent(FlexAlign.End)
    .width('100%')
    .height("100%")
    .onClick(() => {
      console.log("dialogClick")
      if (this.isAutoCancel) {
        console.log("dialogClick2")
        this.cancel();
      }
    })
    .visibility(this.showFlag)
    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration })
      .combine(TransitionEffect.translate({ y: 100 })))
  }

  cancel() {
    this.showFlag = Visibility.Hidden
    console.log("closeDialog")
    setTimeout(() => {
      this.controller.close()
    }, anmDuration)
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State isAutoCancel: boolean = true;
  @State showFlag: Visibility = Visibility.Visible
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample1({ isAutoCancel: this.isAutoCancel, showFlag: this.showFlag }),
    autoCancel: this.isAutoCancel,
    customStyle: true,
    onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
      console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
      console.log("dialog onWillDismiss")
      this.showFlag = Visibility.Hidden
      console.log("closeDialog")
      setTimeout(() => {
        this.dialogController.close()
      }, anmDuration)
      // dismissDialogAction.dismiss()
    }
  })

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