如何定义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,有人知道吗
80浏览 • 1回复 待解决
如何获取组件高度,有人知道吗
66浏览 • 1回复 待解决
如何获取系统电量,有人知道吗
98浏览 • 1回复 待解决
如何实现翻页功能,有人知道吗
124浏览 • 1回复 待解决
List组件性能问题,有人知道吗
94浏览 • 1回复 待解决
应用商店更新机制有人知道吗
114浏览 • 1回复 待解决
有人知道JS menu如何隐藏
2484浏览 • 1回复 待解决
如何实现多行输入,你知道吗
170浏览 • 1回复 待解决
如何创建Toast窗口,你知道吗
135浏览 • 1回复 待解决
ets如何使用rhea库知道吗
611浏览 • 1回复 待解决
如何获取系统时间戳,你知道吗
128浏览 • 1回复 待解决
如何后台播放音乐,你知道吗
162浏览 • 1回复 待解决
如何获取屏幕宽高,你知道吗
203浏览 • 1回复 待解决
如何保持屏幕常亮,你知道吗
164浏览 • 1回复 待解决
北京哪里的好玩知道吗
2754浏览 • 1回复 待解决
如何主动拉起软键盘,你知道吗
160浏览 • 1回复 待解决
如何获取图片的宽高,你知道吗
93浏览 • 1回复 待解决
有人知道社区怎么预约直播
670浏览 • 1回复 已解决
varchar类型怎么补有知道吗
938浏览 • 1回复 待解决
HAP层有无加固的策略,你知道吗
137浏览 • 1回复 待解决
有人知道怎么在markdown里面写目录
577浏览 • 1回复 已解决
动态页面跳转方案,有谁知道吗
89浏览 • 1回复 待解决