HarmonyOS CustomDialogController设置的openAnimation动画是否是只有一种动画效果

openAnimation: {
  duration: 300,
  curve: Curve.Linear,
  playMode: PlayMode.Normal
}

目标动画是，从下方0到内容高度，消失动画则是从内容高度到0，最后dismiss。目前是通过在CustomDialog中布局设置offset，使用aminateTo来实现。请问是否有更好的实现方式？

HarmonyOS

shlp

2024-12-24 17:02:03

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

可参考demo设置自定义弹窗的自定义动画，查看文档中属性动画、转场动画等实现：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-animation-V5

let anmDuration: number = 200;
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
    autoCancel: false
  })
  @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: -5 })
      .width('100%')
    }
    .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;
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({ isAutoCancel: this.isAutoCancel }),
    autoCancel: this.isAutoCancel,
    customStyle: true
  })

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