HarmonyOS NEXT应用开发之多模态页面转场动效实现案例

介绍

本示例介绍多模态页面转场动效实现：通过半模态转场实现半模态登录界面， 与全屏模态和组件转场结合实现多模态组合登录场景，其中手机验证码登录与账号密码登录都为组件， 通过TransitionEffect.move()实现组件间转场达到近似页面转场的效果。

效果图预览

使用说明

登录方式有两种，验证码登录和账号密码登录

1. 点击主页"点击跳转半模态登录页"按钮
2. 在半模态窗口中选中同意协议键，并点击获取验证码按钮，跳转至手机验证码登录页面。
3. 通过点击手机验证码登录页面中的"账号密码登录"，向右切换跳转至账号密码登录页面。
4. 通过点击账号密码登录页面中的"手机验证码登录"，向左切换跳转至手机验证码登录页面。

实现思路

场景：半模态转场至验证码登录，验证码登录和账户登录可以相互切换

登录方式有两种，验证码登录和账户，需要在一个全屏模态窗口CaptureLogin中切换，使用if进行条件渲染。

1、通过bindSheet属性为主页的button绑定半模态页面

Button($r('app.string.half_screen_modal_login_description'))
  .bindSheet($$this.isPresent, this.halfModalLogin(), { // 按钮绑定半模态转场
    height: this.sheetHeight, // 半模态高度
    dragBar: this.showDragBar, // 是否显示控制条
    backgroundColor: "#FEFEFE",
    showClose:true, // 是否显示关闭图标
    shouldDismiss:((sheetDismiss: SheetDismiss)=> { // 半模态页面交互式关闭回调函数
      console.log("bind sheet shouldDismiss")
      sheetDismiss.dismiss()
    })
  })

2、在半模态页面中的验证码登录按钮绑定全屏模态转场，并将对应的全屏模态转场特效置空。

@Builder
halfModalLogin() { // 半模态窗口页面
  Button("验证码登录")
    .bindContentCover(this.isPresentInLoginView,this.defaultLogin(),{ modalTransition: ModalTransition.NONE}) // 全屏模态转场
    .onClick(() => {
      if (this.isConfirmed) { // 判断是否同意协议
        // 半模态页面中跳转全屏模态登录页
        this.isPresentInLoginView = true;
      }
    })
}

3、通过点击第二步中的按钮跳转到全屏模态组件(CaptureLogin)，并通过isDefaultLogin控制两种登录组件的条件渲染：true(手机验证码登录),false(二维码登录)，同时通过TransitionEffect.move()实现组件间转场， 从而实现组件转场类似页面转场的效果。

build() {
  Stack({ alignContent: Alignment.TopStart }) {
    if (this.isDefaultLogin) {
      CaptchaLogin() // 手机验证码登录
        .transition(TransitionEffect.move(TransitionEdge.START).animation({ duration: EffectDuration, curve: Curve.Linear })) // 从左边推出
    } else {
      AccountLogin() // 账号密码登录
        .transition(TransitionEffect.move(TransitionEdge.END).animation({ duration: EffectDuration, curve: Curve.Linear })) // 从右边推出
    }
  }
}

高性能知识点

容器限制条件渲染组件的刷新范围

工程结构&模块类型

multimodaltransition                            // har类型
|---src/main/ets/view
|   |---HalfModalWindow.ets                     // 视图层-主页
|---src/main/ets/model
|   |---AccountLogin.ets                        // 模型层-账号密码登录页 
|   |---CaptchaLogin.ets                        // 模型层-验证码登录页(全屏模态窗口) 

模块依赖

har包-common库中UX标准
@ohos/routermodule(动态路由)

参考资料

半模态转场
全屏模态

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

1. 基本概念
2. 构建第一个ArkTS应用
3. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向