介紹

本示例介紹多模態(tài)頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)效實(shí)現(xiàn)：通過(guò)半模態(tài)轉(zhuǎn)場(chǎng)實(shí)現(xiàn)半模態(tài)登錄界面， 與全屏模態(tài)和組件轉(zhuǎn)場(chǎng)結(jié)合實(shí)現(xiàn)多模態(tài)組合登錄場(chǎng)景，其中手機(jī)驗(yàn)證碼登錄與賬號(hào)密碼登錄都為組件， 通過(guò)TransitionEffect.move()實(shí)現(xiàn)組件間轉(zhuǎn)場(chǎng)達(dá)到近似頁(yè)面轉(zhuǎn)場(chǎng)的效果。

效果圖預(yù)覽

使用說(shuō)明

登錄方式有兩種，驗(yàn)證碼登錄和賬號(hào)密碼登錄

1. 點(diǎn)擊主頁(yè)"點(diǎn)擊跳轉(zhuǎn)半模態(tài)登錄頁(yè)"按鈕
2. 在半模態(tài)窗口中選中同意協(xié)議鍵，并點(diǎn)擊獲取驗(yàn)證碼按鈕，跳轉(zhuǎn)至手機(jī)驗(yàn)證碼登錄頁(yè)面。
3. 通過(guò)點(diǎn)擊手機(jī)驗(yàn)證碼登錄頁(yè)面中的"賬號(hào)密碼登錄"，向右切換跳轉(zhuǎn)至賬號(hào)密碼登錄頁(yè)面。
4. 通過(guò)點(diǎn)擊賬號(hào)密碼登錄頁(yè)面中的"手機(jī)驗(yàn)證碼登錄"，向左切換跳轉(zhuǎn)至手機(jī)驗(yàn)證碼登錄頁(yè)面。

實(shí)現(xiàn)思路

場(chǎng)景：半模態(tài)轉(zhuǎn)場(chǎng)至驗(yàn)證碼登錄，驗(yàn)證碼登錄和賬戶(hù)登錄可以相互切換

登錄方式有兩種，驗(yàn)證碼登錄和賬戶(hù)，需要在一個(gè)全屏模態(tài)窗口CaptureLogin中切換，使用if進(jìn)行條件渲染。

1、通過(guò)bindSheet屬性為主頁(yè)的button綁定半模態(tài)頁(yè)面

Button($r('app.string.half_screen_modal_login_description'))
  .bindSheet($$this.isPresent, this.halfModalLogin(), { // 按鈕綁定半模態(tài)轉(zhuǎn)場(chǎng)
    height: this.sheetHeight, // 半模態(tài)高度
    dragBar: this.showDragBar, // 是否顯示控制條
    backgroundColor: "#FEFEFE",
    showClose:true, // 是否顯示關(guān)閉圖標(biāo)
    shouldDismiss:((sheetDismiss: SheetDismiss)=> { // 半模態(tài)頁(yè)面交互式關(guān)閉回調(diào)函數(shù)
      console.log("bind sheet shouldDismiss")
      sheetDismiss.dismiss()
    })
  })

2、在半模態(tài)頁(yè)面中的驗(yàn)證碼登錄按鈕綁定全屏模態(tài)轉(zhuǎn)場(chǎng)，并將對(duì)應(yīng)的全屏模態(tài)轉(zhuǎn)場(chǎng)特效置空。

@Builder
halfModalLogin() { // 半模態(tài)窗口頁(yè)面
  Button("驗(yàn)證碼登錄")
    .bindContentCover(this.isPresentInLoginView,this.defaultLogin(),{ modalTransition: ModalTransition.NONE}) // 全屏模態(tài)轉(zhuǎn)場(chǎng)
    .onClick(() => {
      if (this.isConfirmed) { // 判斷是否同意協(xié)議
        // 半模態(tài)頁(yè)面中跳轉(zhuǎn)全屏模態(tài)登錄頁(yè)
        this.isPresentInLoginView = true;
      }
    })
}

3、通過(guò)點(diǎn)擊第二步中的按鈕跳轉(zhuǎn)到全屏模態(tài)組件(CaptureLogin)，并通過(guò)isDefaultLogin控制兩種登錄組件的條件渲染：true(手機(jī)驗(yàn)證碼登錄),false(二維碼登錄)，同時(shí)通過(guò)TransitionEffect.move()實(shí)現(xiàn)組件間轉(zhuǎn)場(chǎng)， 從而實(shí)現(xiàn)組件轉(zhuǎn)場(chǎng)類(lèi)似頁(yè)面轉(zhuǎn)場(chǎng)的效果。

build() {
  Stack({ alignContent: Alignment.TopStart }) {
    if (this.isDefaultLogin) {
      CaptchaLogin() // 手機(jī)驗(yàn)證碼登錄
        .transition(TransitionEffect.move(TransitionEdge.START).animation({ duration: EffectDuration, curve: Curve.Linear })) // 從左邊推出
    } else {
      AccountLogin() // 賬號(hào)密碼登錄
        .transition(TransitionEffect.move(TransitionEdge.END).animation({ duration: EffectDuration, curve: Curve.Linear })) // 從右邊推出
    }
  }
}

高性能知識(shí)點(diǎn)

容器限制條件渲染組件的刷新范圍

工程結(jié)構(gòu)&模塊類(lèi)型

multimodaltransition                            // har類(lèi)型
|---src/main/ets/view
|   |---HalfModalWindow.ets                     // 視圖層-主頁(yè)
|---src/main/ets/model
|   |---AccountLogin.ets                        // 模型層-賬號(hào)密碼登錄頁(yè) 
|   |---CaptchaLogin.ets                        // 模型層-驗(yàn)證碼登錄頁(yè)(全屏模態(tài)窗口) 

模塊依賴(lài)

har包-common庫(kù)中UX標(biāo)準(zhǔn)
@ohos/routermodule(動(dòng)態(tài)路由)

參考資料

半模態(tài)轉(zhuǎn)場(chǎng)
全屏模態(tài)