HarmonyOS鸿蒙Next中CustomDialog设置自定义的转场动画

HarmonyOS鸿蒙Next中CustomDialog设置自定义的转场动画在做需求的时候想实现一个CustomDialog，开启时从底部弹出，关闭后又收回到底部，但是发现CustomDialog的方法里并没有可以设置自定义转场动画的属性，只有openAnimation和closeAnimation用于设置弹窗弹出和关闭时的动画效果相关参数，并不能自定义转场动画。

后面发现了一个办法可以实现自定义转场动画，只需要做到以下的两步即可：

1.在传入CustomDialogController的自定义builder中，在build()根目录下的布局添加两个属性：

.visibility(this.showFlag)
.transition(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: this.animationTime }))

第一个是控制builder可见性的visibility属性，在点击弹窗退出按钮的时候需要将visibility的属性设置为Hidden，不能设置为None,否则会在关闭的瞬间弹窗就会消失，不会显示退出的转场动画

同时需要将dialogController的关闭方法延迟到转场动画完成之后，示例代码如下

.onClick(() => {
  this.showFlag = Visibility.Hidden
  setTimeout(() => {
    this.dialogController?.close();
  }, this.animationTime)
})

第二个需要设置的属性则是transition转场动画的实现，只需要设置在build()的根目录下即可实现进入和退出的转场动画

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

songsunli 1楼•12 天前

那需要autoCancel为ture的时候你这个方法就行不通了

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

yuanlaile 2楼•12 天前

在HarmonyOS鸿蒙Next中，CustomDialog可以通过setCustomTransition方法设置自定义的转场动画。首先，需要创建一个Transition对象，定义进入和退出的动画效果。可以使用TransitionManager提供的createTransition方法创建动画，并指定动画的持续时间、插值器等参数。然后，通过setCustomTransition方法将动画应用到CustomDialog上。例如：

import { Transition, TransitionManager, CustomDialog } from '@ohos.arkui';

let enterTransition = TransitionManager.createTransition({
  duration: 300,
  interpolator: 'easeInOut'
});

let exitTransition = TransitionManager.createTransition({
  duration: 300,
  interpolator: 'easeInOut'
});

let customDialog = new CustomDialog();
customDialog.setCustomTransition(enterTransition, exitTransition);

通过这种方式，可以为CustomDialog设置自定义的转场动画，提升用户体验。

vueper 3楼•12 天前

在HarmonyOS鸿蒙Next中，为CustomDialog设置自定义转场动画，可以通过重写onStart()和onStop()方法，结合Animator或Animation实现。首先，在onStart()中定义进入动画，如使用ObjectAnimator设置透明度、平移等属性；在onStop()中定义退出动画。通过AnimatorSet组合多个动画效果，最后调用start()启动动画。确保动画流畅，提升用户体验。