如何定义dialog动画,有人知道吗?

CustomDialogController的 openAnimation closeAnimation 如何定义转场效果。想把dialog动画改成底部弹出,向底部收起。

HarmonyOS
2024-01-31 10:48:02
浏览
已于2024-2-1 17:41:45修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Bald_eagle

示例代码

参考如下demo设置自定义弹窗的自定义动画,思路就是让自定义弹窗占满整个页面然后让里面的内容来添加转场动画,然后这个demo就是底部弹出底部收起的。

let anmDuration: number = 200; 
 
// 弹窗交互 
@CustomDialog 
struct CustomDialogExample { 
  controller: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample({}), 
    autoCancel: false 
  }) 
  @State showFlag: Visibility = Visibility.Visible; 
  @State isAutoCancel: boolean = false; 
  textController: TextAreaController = new TextAreaController() 
 
  build() { 
    Column() { 
      Row() { 
        Text("自定义动画的弹窗") 
      } 
      .padding(8) 
      .backgroundColor('#FFFFFF') 
      .height(200) 
      .margin({ bottom: -5 }) 
      .width('100%') 
    } 
    .justifyContent(FlexAlign.End) 
    .width('100%') 
    .height("100%") 
    .onClick(() => { 
      console.log("dialogClick") 
      if (this.isAutoCancel) { 
        console.log("dialogClick2") 
        this.cancel(); 
      } 
    }) 
    .visibility(this.showFlag) 
    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration }) 
      .combine(TransitionEffect.translate({ y: 100 }))) 
  } 
 
  cancel() { 
    this.showFlag = Visibility.Hidden 
    console.log("closeDialog") 
    setTimeout(() => { 
      this.controller.close() 
    }, anmDuration) 
  } 
} 
 
@Entry 
@Component 
struct CustomDialogUser { 
  @State isAutoCancel: boolean = true; 
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample({ isAutoCancel: this.isAutoCancel }), 
    autoCancel: this.isAutoCancel, 
    customStyle: true 
  }) 
 
  build() { 
    Column() { 
      Button('click me') 
        .onClick(() => { 
          this.dialogController.open() 
        }) 
    }.width('100%') 
    .height('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-02-01 17:35:35
相关问题
如何跳出ForEach,有人知道吗
214浏览 • 1回复 待解决
如何发送短信,有人知道吗?
123浏览 • 1回复 待解决
如何实现翻页功能,有人知道吗
236浏览 • 1回复 待解决
如何引用HSP库,有人知道吗?
132浏览 • 1回复 待解决
如何获取组件高度,有人知道吗
211浏览 • 1回复 待解决
如何获取系统电量,有人知道吗
193浏览 • 1回复 待解决
如何实现http长连接,有人知道吗
119浏览 • 1回复 待解决
如何开启AOT编译模式,有人知道吗
149浏览 • 1回复 待解决
clientid相关问题,有人知道吗
38浏览 • 0回复 待解决
如何拉起相机界面,有人知道吗
160浏览 • 1回复 待解决
List组件性能问题,有人知道吗
239浏览 • 1回复 待解决
如何实现防截屏功能,有人知道吗
164浏览 • 1回复 待解决
是否有无网判断接口,有人知道吗
151浏览 • 1回复 待解决
应用商店更新机制有人知道吗
225浏览 • 1回复 待解决
有人知道JS menu如何隐藏
2606浏览 • 1回复 待解决
如何实现多行输入,你知道吗
287浏览 • 1回复 待解决
ets如何使用rhea库知道吗
709浏览 • 1回复 待解决
如何创建Toast窗口,你知道吗
252浏览 • 1回复 待解决
如何获取系统时间戳,你知道吗
623浏览 • 1回复 待解决
如何后台播放音乐,你知道吗
422浏览 • 1回复 待解决
如何保持屏幕常亮,你知道吗
378浏览 • 1回复 待解决
如何获取屏幕宽高,你知道吗
409浏览 • 1回复 待解决
北京哪里的好玩知道吗
2874浏览 • 1回复 待解决