HarmonyOS 开发-多模态页面转场动效实现案例

import { RouterInfo } from '@ohos/dynamicsRouter/Index';
pageMap(name: string, param: ESObject) {
  NavDestination() {}
  // 按需将NavDestinationMode配置为DIALOG类型，此时背景默认透明
  .mode(name === RouterInfo.MULTI_MODAL_TRANSITION.moduleName + "/" + RouterInfo.MULTI_MODAL_TRANSITION.pageName ?
  NavDestinationMode.DIALOG : NavDestinationMode.STANDARD)
}

Text()
  /**
   * TODO: 知识点: 通过bindSheet属性为组件绑定半模态页面，由于半模态必须绑定组件，
   * 此处绑定无样式的Text组件作为开屏半模态展示。
   * isPresent：是否显示半模态页面
   */
  .bindSheet($this.isPresent, this.halfModalLogin(), { // Text绑定半模态转场
    height: this.sheetHeight, // 半模态高度
    dragBar: this.showDragBar, // 是否显示控制条
    backgroundColor: $r('app.color.btn_bgc'),
    showClose: true, // 是否显示关闭图标
    shouldDismiss: ((sheetDismiss: SheetDismiss) => { // 半模态页面交互式关闭回调函数
      sheetDismiss.dismiss();
      this.pageStack.pop();
    })
})

Text()
  /**
   * TODO: 知识点: 通过bindContentCover属性为组件绑定全屏模态页面，由于全屏模态必须绑定组件，
   * 此处绑定无样式的Text组件作为手机验证码组件和账号密码组件的全屏模态展示。
   * isPresentInLoginView：是否显示全屏模态页面
   */
  .bindContentCover($this.isPresentInLoginView, this.defaultLogin())

@Builder
halfModalLogin() { // 半模态窗口页面
  Button("验证码登录")
    .onClick(() => {
      if (this.isConfirmed) { // 判断是否同意协议
        // 半模态页面中跳转全屏模态登录页
        this.isPresentInLoginView = true;
        // 用于标识转场类型，从半模态跳转至手机验证码组件时为false，从账号密码组件跳转至手机验证码组件时为true
        this.isShowTransition = false;
      }
    })
}

// 1.1、定义验证码登录页的转场效果1：用于定义半模态转场到此组件的进场动效和组件间后续切换的转场动效，进场时无动效，转场时从左边推出，
private effect1: TransitionEffect =
  TransitionEffect.asymmetric(
    TransitionEffect.IDENTITY,
    TransitionEffect.move(TransitionEdge.START).animation({ duration: EFFECT_DURATION, curve: Curve.Linear }))
// 1.2、定义验证码登录页的转场效果2：用于后面组件切换到此组件时转场的动效，从左边推出。
private effect3: TransitionEffect =
  TransitionEffect
    .move(TransitionEdge.START).animation({ duration: EFFECT_DURATION, curve: Curve.Linear })
        
build() {
  Stack({ alignContent: Alignment.TopStart }) {
    if (this.isDefaultLogin) {
      CaptchaLogin() // 手机验证码登录
        /* 验证码登录组件绑定转场
         * TODO: 知识点: 当isShowTransition为false，此时从半模态进入手机验证码组件：此时关闭组件进场动效，开启全模态进场动效，
         * 当isShowTransition为true，此时从账号密码组件返回此组件：打开组件进场动效，此时左滑进入手机验证码组件。
         */
        .transition(this.isShowTransition ? this.effect3 : this.effect1)
    } else {
      AccountLogin() // 账号密码登录
        .transition(TransitionEffect.move(TransitionEdge.END).animation({
          duration: EffectDuration,
          curve: Curve.Linear
        })) // 从右边推出
    }
  }
}

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