HarmonyOS custondialog显示和关闭动画设置

自定了一个customDialog,需要显示的时候是从底部向上平移出现,关闭的时候从底部平移移出,目前的做法是在build()的根布局加了。

.transition(TransitionEffect.move(TransitionEdge.BOTTOM).animation({duration:300, curve: Curve.Ease}))

但是只有出险的时候有效果,关闭的时候还是默认的动画效果。

HarmonyOS
2024-09-02 12:03:50
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

因为您这边没有提供demo,所以帮你找到类似的案例代码,需要注意在关闭的时候,如果弹窗直接关闭是没有转场效果的,可以先用显隐控制,设置弹窗为隐藏,此时弹出向下退出的动效生效,再设置延时关闭弹窗。

demo如下:

@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(() => { 
      this.controller.close() 
    }, 200) 
  } 
} 
 
@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%') 
  } 
}
分享
微博
QQ
微信
回复
2024-09-02 16:07:54
相关问题
TransitionEffect动画循环播放如何关闭
1757浏览 • 1回复 待解决
HarmonyOS 相对定位动画
425浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
2219浏览 • 1回复 待解决
HarmonyOS如何控制打开关闭手电筒
351浏览 • 1回复 待解决
动画lottie能否设置播放次数
1952浏览 • 1回复 待解决
如何全局设置页面转场动画
663浏览 • 1回复 待解决
HarmonyOS 页面如何设置全屏显示
273浏览 • 1回复 待解决
怎么监听键盘的弹起关闭事件?
2686浏览 • 1回复 待解决