HarmonyOS鸿蒙Next中如何自定义CustomDialog的动画？

HarmonyOS鸿蒙Next中如何自定义CustomDialog的动画？ 我想实现一个在底部的弹框，并且他的动画是从底部出现，退出时从底部退出。 我看了现在 CustomDialog 的默认动画应该是弹出的效果，请问我需要如何实现这样的效果？能否给段代码？

3 回复

参考如下demo设置自定义弹窗的自定义动画，思路就是让自定义弹窗占满整个页面然后让里面的内容来添加转场动画，然后这个demo就是底部弹出底部收起。

let anmDuration: number = 1000;

// 弹窗交互
@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%')
  }
}

更多关于HarmonyOS鸿蒙Next中如何自定义CustomDialog的动画？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，自定义CustomDialog的动画可以通过以下步骤实现：

  1. 创建动画资源文件：在resources/base/animation目录下创建XML文件，定义所需的动画效果。例如，定义一个从底部滑入的动画：

    <!-- slide_in_bottom.xml -->
<set xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <translate
        ohos:fromYDelta="100%p"
        ohos:toYDelta="0"
        ohos:duration="300"/>
</set>

  2. 设置Dialog的动画样式：在resources/base/element目录下的theme.json文件中，为CustomDialog定义动画样式。例如：

    {
    "name": "CustomDialogTheme",
    "parent": "ohos:Theme",
    "styles": [
        {
            "name": "CustomDialogStyle",
            "animations": {
                "windowEnterAnimation": "$animation:slide_in_bottom",
                "windowExitAnimation": "$animation:slide_out_bottom"
            }
        }
    ]
}

  3. 应用动画样式：在创建CustomDialog时，通过setStyle方法应用自定义的动画样式。例如：

    const customDialog = new CustomDialog(context);
customDialog.setStyle("CustomDialogStyle");

  4. 显示Dialog：调用show方法显示CustomDialog，动画将自动应用。

通过这些步骤，你可以在HarmonyOS鸿蒙Next中为CustomDialog自定义动画效果。

在HarmonyOS鸿蒙Next中，自定义CustomDialog的动画可以通过以下步骤实现：

  1. 创建动画资源：在resources/base/animation目录下定义XML动画资源文件，如dialog_enter.xml和dialog_exit.xml，分别用于进入和退出动画。

  2. 设置动画：在CustomDialog的onStart()方法中，使用getWindow().setWindowAnimations()方法加载动画资源。

  3. 应用动画：在show()方法中调用super.show()显示对话框时，系统会自动应用定义的动画效果。

通过这种方式，你可以为CustomDialog定制独特的进入和退出动画效果。

回到顶部