二级浮层的出场动画实现

二级浮层的出场动画实现。

HarmonyOS
2024-06-03 22:24:58
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
pfuchenlu

以下示例代码可以实现进场由下到上,出场由上到下

let anmDuration: number = 500; 
 
// 弹窗交互 
@CustomDialog 
struct CustomDialogExample { 
  @State showFlag: Visibility = Visibility.Visible; 
  @State isAutoCancel: boolean = false; 
  controller: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample({}), 
    autoCancel: true, 
  }) 
 
  build() { 
    Column() { 
      Text('我是内容') 
        .fontSize(20) 
        .margin({ top: 10, bottom: 10 }) 
        .backgroundColor('#FFFFFF') 
        .textAlign(TextAlign.Center) 
        .height(400) 
        .width('100%') 
        .margin({ top: 400 }) 
        .onClick(() => { 
          this.cancel(); 
        }) 
    } 
    .width('100%') 
    .height('100%') 
    .margin({ 
      bottom: -15 
    }) 
    .onClick(() => { 
      if (this.isAutoCancel) { 
        this.cancel(); 
      } 
    }) 
    .visibility(this.showFlag) 
    // 定义进场出场转场动画效果 
    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration }) 
      .combine(TransitionEffect.translate({ y: 400 }))) 
  } 
 
  // 延迟关闭弹窗,让自定义的出场动画显示 
  cancel() { 
    this.showFlag = Visibility.Hidden 
    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, 
    maskColor: 'rgba(255, 100, 255, 0)' 
  }) 
 
  build() { 
    Column() { 
      Text('click me') 
        .onClick(() => { 
          this.dialogController.open() 
        }) 
        .margin({ top: 700 }) 
    } 
    .width('100%').height('100%').margin({ top: 0 }) 
    .backgroundColor('#fff3ecec') 
  } 
}
分享
微博
QQ
微信
回复
2024-06-04 21:48:25
相关问题
Navigation二级导航嵌套
430浏览 • 1回复 待解决
listadd跟remove item入场、出场动画
498浏览 • 1回复 待解决
如何实现全局窗效果
744浏览 • 1回复 待解决
native如何访问rawfile进制文件
938浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
755浏览 • 1回复 待解决
如何实现list折叠动画效果
18浏览 • 1回复 待解决
如何实现动画转场效果
408浏览 • 1回复 待解决
实现次侧滑退出应用
671浏览 • 1回复 待解决
panGesture结合动画实现fling效果
417浏览 • 1回复 待解决
鸿蒙如何实现动画值变化
8218浏览 • 1回复 待解决
求教ArkUI如何实现组合动画
4285浏览 • 1回复 待解决
文字动画效果如何实现
862浏览 • 0回复 待解决
PolarDB 如何实现了企业特性?
1688浏览 • 1回复 待解决
如何实现从底部缓慢上升弹窗动画
763浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
9020浏览 • 2回复 待解决
如何实现上下切换页面间跳转动画
859浏览 • 0回复 待解决
Refresh结合lottie实现下拉刷新动画
510浏览 • 1回复 待解决
如何实现组件水波纹动画案例
472浏览 • 1回复 待解决