介紹

本示例介紹多模態(tài)頁面轉(zhuǎn)場(chǎng)動(dòng)效實(shí)現(xiàn)：通過半模態(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)密碼登錄都為組件窃这， 通過TransitionEffect.move()實(shí)現(xiàn)組件間轉(zhuǎn)場(chǎng)達(dá)到近似頁面轉(zhuǎn)場(chǎng)的效果蛔琅。

效果圖預(yù)覽

使用說明

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

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

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

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

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

1茫陆、通過bindSheet屬性為主頁的button綁定半模態(tài)頁面

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)頁面交互式關(guān)閉回調(diào)函數(shù)
      console.log("bind sheet shouldDismiss")
      sheetDismiss.dismiss()
    })
  })

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

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

3挥下、通過點(diǎn)擊第二步中的按鈕跳轉(zhuǎn)到全屏模態(tài)組件(CaptureLogin)，并通過isDefaultLogin控制兩種登錄組件的條件渲染：true(手機(jī)驗(yàn)證碼登錄),false(二維碼登錄)桨醋，同時(shí)通過TransitionEffect.move()實(shí)現(xiàn)組件間轉(zhuǎn)場(chǎng)棚瘟， 從而實(shí)現(xiàn)組件轉(zhuǎn)場(chǎng)類似頁面轉(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)&模塊類型

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

模塊依賴

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

參考資料

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