custondialog显示和关闭动画设置#HarmonyOS 鸿蒙Next

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

custondialog显示和关闭动画设置#HarmonyOS 鸿蒙Next

自定了一个customDialog，需要显示的时候是从底部向上平移出现，关闭的时候从底部平移移出，目前的做法是在build()的根布局加了.transition(TransitionEffect.move(TransitionEdge.BOTTOM).animation({duration:300, curve: Curve.Ease}))，但是只有出险的时候有效果，关闭的时候还是默认的动画效果

Harmonyos Next教程
3 回复
因为您这边没有提供demo，所以帮你找到类似的案例代码，需要注意在关闭的时候，如果弹窗直接关闭是没有转场效果的，可以先用显隐控制，设置弹窗为隐藏，此时弹出向下退出的动效生效，再设置延时关闭弹窗。demo如下： 
[@CustomDialog](/user/CustomDialog)
struct CustomDialogExample {

controller: CustomDialogController


@State showFlag: Visibility = Visibility.Visible;


build() {
Column() {
Button(“关闭弹窗”)
}
.width(“100%”)
.height(400)
.justifyContent(FlexAlign.Center)
.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(() => {
  <span class="hljs-keyword">this</span>.controller.close();
}, <span class="hljs-number">200</span>);

}
}


@Entry
@Component
struct CustomDialogUser {


dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(),
autoCancel: false,
customStyle: true
});


build() {
Column() {
Button(‘打开弹窗’)
.onClick(() => {
this.dialogController.open();
})
}
.justifyContent(FlexAlign.Center)
.width(‘100%’)
.height(‘100%’)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

看一下通用能力接口，有一个接口我记得是关闭组件动画的

在HarmonyOS中，为custonDialog（自定义对话框）设置显示和关闭动画，通常需要通过自定义动画资源文件并在对话框显示与隐藏时应用这些动画。以下是一个基本的实现思路：

  1. 创建动画资源文件：

    • 在res/anim目录下创建两个XML文件，一个用于显示动画（如dialog_enter.xml），另一个用于关闭动画（如dialog_exit.xml）。
    • 在这些XML文件中定义动画效果，如渐变、缩放等。

  2. 应用动画到对话框：

    • 在显示对话框前，通过getWindow().setWindowAnimations(int resId)方法设置对话框的动画资源ID。这里的resId应该是一个指向包含显示和关闭动画的资源文件的引用（通常是一个包含两个动画的集合资源）。
    • 注意，如果只想分别设置显示和关闭动画，可能需要在对话框显示的代码和隐藏的监听器中分别处理。

  3. 显示与关闭对话框：

    • 使用标准的对话框显示方法（如show()）和关闭方法（如dismiss()）来控制对话框的显示与隐藏。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。这样，你可以获得更专业的技术支持。

回到顶部