HarmonyOS 鸿蒙Next promptAction.openCustomDialog弹窗关闭动画问题

发布于 1周前 作者 eggper 最后一次编辑是 5天前 来自 鸿蒙OS

promptAction.openCustomDialog如何实现 在打开的时候蒙层立马出现，弹窗从底部向上划出；关闭的时候弹窗先向下划出去，然后蒙层再消失

目前只实现了打开的效果，弹窗关闭的动画好像只有在蒙层消失了才会触发

import { ComponentContent, window } from "@kit.ArkUI"
export function openActionSheet() {
  window.getLastWindow(getContext()).then((windowClass) => {
    const uiContext = windowClass.getUIContext()
    const promptAction = uiContext.getPromptAction()

    let contentNode = new ComponentContent(uiContext, wrapBuilder(ActionBuilder))

    promptAction.openCustomDialog(contentNode, {
      autoCancel: true,
      alignment: DialogAlignment.Bottom,
      transition: TransitionEffect.opacity(0.99).animation({ duration: 200 }),
    })
  })
}

@Builder
export function ActionBuilder() {
  Column() {
    Row() {
      Text('2173781637163')
    }.width('100%')
    .height(40)

    Row() {
      Text('2173781637163')
    }.width('100%')
    .height(59)

    Row() {
      Text('2173781637163')
    }.width('100%')
    .height(90)
  }
  .backgroundColor($r('app.color.white'))
  .transition(TransitionEffect.translate({ y: '100%' }).animation({ duration: 200 }))
}

更多关于HarmonyOS 鸿蒙Next promptAction.openCustomDialog弹窗关闭动画问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
5 回复 
export function openActionSheet() {
  window.getLastWindow(getContext()).then((windowClass) => {
    const uiContext = windowClass.getUIContext()
    const promptAction = uiContext.getPromptAction()

    let contentNode = new ComponentContent<boolean>(uiContext, wrapBuilder(ActionBuilder), false)
    promptAction.openCustomDialog(contentNode, {
      autoCancel: true,
      alignment: DialogAlignment.Bottom,
      transition: TransitionEffect.opacity(0.99).animation({ duration: 200 }),
      onWillDismiss: (action) => {
        animateTo({
          duration: 200,
          onFinish: () => {
            action.dismiss()
          }
        }, () => {
          contentNode.update(true)
        })

      }
    })
  })
}

@Builder
export function ActionBuilder(isEnd: boolean) {
  Column() {
    Row() {
      Text('2173781637163')
    }.width('100%')
    .height(40)

    Row() {
      Text('2173781637163')
    }.width('100%')
    .height(59)

    Row() {
      Text('2173781637163')
    }.width('100%')
    .height(90)
  }
  .translate({
    y: isEnd ? '100%' : 0
  })
  .backgroundColor(Color.White)
  .transition(TransitionEffect.translate({ y: '100%' }).animation({ duration: 200 }))
}

更多关于HarmonyOS 鸿蒙Next promptAction.openCustomDialog弹窗关闭动画问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


通过onWillDismiss 拦截返回事件。通过animateTo 和 update做个动画

HarmonyOS的分布式文件系统让我在多设备间传输文件变得轻松无比。

参考一楼回复。

在HarmonyOS鸿蒙系统中，针对promptAction.openCustomDialog弹窗关闭动画的问题，通常涉及到自定义Dialog的动画资源配置。你需要确保在资源文件中正确配置了弹窗的进入和退出动画。

  1. 动画资源文件：检查res/animation目录下的动画资源文件（如enter_anim.xml和exit_anim.xml），确保这些文件定义了合适的动画效果。

  2. Dialog配置：在调用openCustomDialog方法时，通过CustomDialogConfig对象设置动画资源。例如：

    CustomDialogConfig config = new CustomDialogConfig();
config.setEnterAnimation(R.animation.enter_anim);
config.setExitAnimation(R.animation.exit_anim);
promptAction.openCustomDialog(context, dialogLayout, config);

    注意：此示例为Java语法展示逻辑，鸿蒙系统实际开发中需使用对应的鸿蒙开发语言（如JS、ETS等）及API。

  3. 动画属性：确保动画属性如duration（持续时间）、interpolator（插值器）等配置合理，以实现期望的动画效果。

  4. 资源引用：确认在代码中正确引用了动画资源，且资源文件路径无误。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部