如何自定义弹窗的弹出动画和关闭动画

希望实现弹窗打开时有从底部向上弹出的效果,以及关闭时从下消失的效果。

HarmonyOS
2024-05-23 23:23:55
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
数掉几只鱼

当前自定义弹窗的openAnimation和closeAnimation只能实现弹窗原地打开的相关动画设置,无法设置弹窗位置上变化的效果。

可以通过给弹窗设置组件转场动画(transition)来实现,参考代码如下:

参考代码:

// 弹窗交互 
@CustomDialog 
struct CustomDialogExample { 
  controller: CustomDialogController 
  @State showFlag: Visibility = Visibility.Visible; 
  
  build() { 
    Column() { 
      Button("关闭弹窗") 
    } 
    .width("100%") 
    .height(400) 
    .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('click me') 
        .onClick(() => { 
          this.dialogController.open() 
        }) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-05-24 23:13:38
mb6254f274ad271

如下代码

dialogController: CustomDialogController | null = new CustomDialogController({
    builder: renderHospitalCustomDialogBuilder(),
    autoCancel: true,
    customStyle: true,
    alignment: DialogAlignment.Bottom,
    cornerRadius: 10,
    width: '100%',
  })
Column() {
}.borderRadius({
      topLeft: 20,
      topRight: 20
    })
    .linearGradient({colors: [['#efe3c7', 0], ['#ffffff', 1]]})
    .visibility(this.showFlag)
    .transition(TransitionEffect.OPACITY.animation({ duration: 800 }).combine(TransitionEffect.translate({ y: 1000 })))

自定义弹窗设置了customStyle:true,那么本身的圆角就不剩下了,而且给自己的component设置borderRadius也不生效,各位大佬有没有什么解决方案

分享
微博
QQ
微信
回复2
2024-07-11 21:20:45
相关问题
弹窗打开、关闭动画是否支持自定义
2205浏览 • 1回复 待解决
自定义弹窗自定义转场动画
922浏览 • 1回复 待解决
CustomDialog自定义动画
321浏览 • 1回复 待解决
如何实现自定义应用入场动画
714浏览 • 1回复 待解决
swiper组件如何实现自定义切换动画
622浏览 • 1回复 待解决
refresh期望能够自定义loading动画
936浏览 • 1回复 待解决
CustomDialog不支持自定义动画
312浏览 • 2回复 待解决
实现一个自定义动画,出现丢帧问题
319浏览 • 1回复 待解决
TransitionEffect动画循环播放如何关闭
1755浏览 • 1回复 待解决
如何自定义弹窗中再次弹窗
2142浏览 • 1回复 待解决