HarmonyOS 鸿蒙Next如何定义dialog动画

HarmonyOS 鸿蒙Next如何定义dialog动画

@CustomDialog 
struct CustomDialogExample { 
  controller: CustomDialogController; 
  @State showFlag: Visibility = Visibility.Visible; 
 
  build() { 
    Column() { 
      Button('关闭弹窗') 
    } 
    .width('100%') 
    .height(400) 
    .backgroundColor(Color.Gray) 
    .onClick(() => { 
      this.cancel(); 
    }) 
    .visibility(this.showFlag) 
    //核心代码 设置动画事件为200ms ，设置组件转场时插入的起点和删除的终点为屏幕以下100vp 
    .transition(TransitionEffect.OPACITY.animation({ duration: 200 }).combine(TransitionEffect.translate({ y: 100 }))) 
  } 
 
  //在删除的时候需要注意，如果弹窗直接关闭是没有转场效果的，可以先用显隐控制， 
  //设置弹窗为隐藏，此时弹出向下退出的动效生效，再设置延时关闭弹窗。 
  cancel() { 
    this.showFlag = Visibility.Hidden; 
    setTimeout(() => { 
      this.controller.close(); 
    }, 200) 
  } 
} 
 
@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%') 
  } 
}