頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫

兩個(gè)頁(yè)面間發(fā)生跳轉(zhuǎn)，一個(gè)頁(yè)面消失，另一個(gè)頁(yè)面出現(xiàn)，這時(shí)可以配置各自頁(yè)面的頁(yè)面轉(zhuǎn)場(chǎng)參數(shù)實(shí)現(xiàn)自定義的頁(yè)面轉(zhuǎn)場(chǎng)效果。頁(yè)面轉(zhuǎn)場(chǎng)效果寫在pageTransition函數(shù)中，通過PageTransitionEnter和PageTransitionExit指定頁(yè)面進(jìn)入和退出的動(dòng)畫效果。

PageTransitionEnter的接口為：

PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})

PageTransitionExit的接口為：

PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})

上述接口定義了PageTransitionEnter和PageTransitionExit組件，可通過slide、translate、scale、opacity屬性定義不同的頁(yè)面轉(zhuǎn)場(chǎng)效果。對(duì)于PageTransitionEnter而言，這些效果表示入場(chǎng)時(shí)起點(diǎn)值，對(duì)于PageTransitionExit而言，這些效果表示退場(chǎng)的終點(diǎn)值，這一點(diǎn)與組件轉(zhuǎn)場(chǎng)transition配置方法類似。此外，PageTransitionEnter提供了onEnter接口進(jìn)行自定義頁(yè)面入場(chǎng)動(dòng)畫的回調(diào)，PageTransitionExit提供了onExit接口進(jìn)行自定義頁(yè)面退場(chǎng)動(dòng)畫的回調(diào)。

上述接口中的參數(shù)type，表示路由生效的類型，這一點(diǎn)開發(fā)者容易混淆其含義。頁(yè)面轉(zhuǎn)場(chǎng)的兩個(gè)頁(yè)面，必定有一個(gè)頁(yè)面退出，一個(gè)頁(yè)面進(jìn)入。如果通過router.pushUrl操作從頁(yè)面A跳轉(zhuǎn)到頁(yè)面B，則頁(yè)面A退出，做頁(yè)面退場(chǎng)動(dòng)畫，頁(yè)面B進(jìn)入，做頁(yè)面入場(chǎng)動(dòng)畫。如果通過router.back操作從頁(yè)面B返回到頁(yè)面A，則頁(yè)面B退出，做頁(yè)面退場(chǎng)動(dòng)畫，頁(yè)面A進(jìn)入，做頁(yè)面入場(chǎng)動(dòng)畫。即頁(yè)面的PageTransitionEnter既可能是由于新增頁(yè)面(push，入棧)引起的新頁(yè)面的入場(chǎng)動(dòng)畫，也可能是由于頁(yè)面返回(back，或pop，出棧)引起的頁(yè)面棧中老頁(yè)面的入場(chǎng)動(dòng)畫，為了能區(qū)分這兩種形式的入場(chǎng)動(dòng)畫，提供了type參數(shù)，這樣開發(fā)者能完全定義所有類型的頁(yè)面轉(zhuǎn)場(chǎng)效果。

// page A
pageTransition() {
  // 定義頁(yè)面進(jìn)入時(shí)的效果，從左側(cè)滑入，時(shí)長(zhǎng)為1200ms，無(wú)論頁(yè)面棧發(fā)生push還是pop操作均可生效
  PageTransitionEnter({ type: RouteType.None, duration: 1200 })
    .slide(SlideEffect.Left)
  // 定義頁(yè)面退出時(shí)的效果，向左側(cè)滑出，時(shí)長(zhǎng)為1000ms，無(wú)論頁(yè)面棧發(fā)生push還是pop操作均可生效
  PageTransitionExit({ type: RouteType.None, duration: 1000 })
    .slide(SlideEffect.Left)
}

// page B
pageTransition() {
  // 定義頁(yè)面進(jìn)入時(shí)的效果，從右側(cè)滑入，時(shí)長(zhǎng)為1000ms，無(wú)論頁(yè)面棧發(fā)生push還是pop操作均可生效
  PageTransitionEnter({ type: RouteType.None, duration: 1000 })
    .slide(SlideEffect.Right)
  // 定義頁(yè)面退出時(shí)的效果，向右側(cè)滑出，時(shí)長(zhǎng)為1200ms，無(wú)論頁(yè)面棧發(fā)生push還是pop操作均可生效
  PageTransitionExit({ type: RouteType.None, duration: 1200 })
    .slide(SlideEffect.Right)
}

假設(shè)頁(yè)面棧為標(biāo)準(zhǔn)實(shí)例模式，即頁(yè)面棧中允許存在重復(fù)的頁(yè)面?？赡軙?huì)有4種場(chǎng)景，對(duì)應(yīng)的頁(yè)面轉(zhuǎn)場(chǎng)效果如下表。

如果希望pushUrl進(jìn)入的頁(yè)面總是從右側(cè)滑入，back時(shí)退出的頁(yè)面總是從右側(cè)滑出，則上表中的第3、4種情況不滿足要求，那么需要完整的定義4個(gè)頁(yè)面轉(zhuǎn)場(chǎng)效果。

// page A
pageTransition() {
  // 定義頁(yè)面進(jìn)入時(shí)的效果，從右側(cè)滑入，時(shí)長(zhǎng)為1200ms，頁(yè)面棧發(fā)生push操作時(shí)該效果才生效
  PageTransitionEnter({ type: RouteType.Push, duration: 1200 })
    .slide(SlideEffect.Right)
  // 定義頁(yè)面進(jìn)入時(shí)的效果，從左側(cè)滑入，時(shí)長(zhǎng)為1200ms，頁(yè)面棧發(fā)生pop操作時(shí)該效果才生效
  PageTransitionEnter({ type: RouteType.Pop, duration: 1200 })
    .slide(SlideEffect.Left)
  // 定義頁(yè)面退出時(shí)的效果，向左側(cè)滑出，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生push操作時(shí)該效果才生效
  PageTransitionExit({ type: RouteType.Push, duration: 1000 })
    .slide(SlideEffect.Left)
  // 定義頁(yè)面退出時(shí)的效果，向右側(cè)滑出，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生pop操作時(shí)該效果才生效
  PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
    .slide(SlideEffect.Right)
}

// page B
pageTransition() {
  // 定義頁(yè)面進(jìn)入時(shí)的效果，從右側(cè)滑入，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生push操作時(shí)該效果才生效
  PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
    .slide(SlideEffect.Right)
  // 定義頁(yè)面進(jìn)入時(shí)的效果，從左側(cè)滑入，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生pop操作時(shí)該效果才生效
  PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
    .slide(SlideEffect.Left)
  // 定義頁(yè)面退出時(shí)的效果，向左側(cè)滑出，時(shí)長(zhǎng)為1200ms，頁(yè)面棧發(fā)生push操作時(shí)該效果才生效
  PageTransitionExit({ type: RouteType.Push, duration: 1200 })
    .slide(SlideEffect.Left)
  // 定義頁(yè)面退出時(shí)的效果，向右側(cè)滑出，時(shí)長(zhǎng)為1200ms，頁(yè)面棧發(fā)生pop操作時(shí)該效果才生效
  PageTransitionExit({ type: RouteType.Pop, duration: 1200 })
    .slide(SlideEffect.Right)
}

以上代碼則完整的定義了所有可能的頁(yè)面轉(zhuǎn)場(chǎng)樣式。假設(shè)頁(yè)面棧為標(biāo)準(zhǔn)實(shí)例模式，即頁(yè)面棧中允許存在重復(fù)的頁(yè)面?？赡軙?huì)有4種場(chǎng)景，對(duì)應(yīng)的頁(yè)面轉(zhuǎn)場(chǎng)效果如下表。

pageTransition() {
  PageTransitionEnter({ type: RouteType.None, duration: 0 })
  PageTransitionExit({ type: RouteType.None, duration: 0 })
}

通過設(shè)置頁(yè)面轉(zhuǎn)場(chǎng)的時(shí)長(zhǎng)為0，可使該頁(yè)面無(wú)頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫。

// PageTransitionSrc1
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionSrc1 {
  build() {
    Column() {
      Image($r('app.media.mountain'))
        .width('90%')
        .height('80%')
        .objectFit(ImageFit.Fill)
        .syncLoad(true) // 同步加載圖片，使頁(yè)面出現(xiàn)時(shí)圖片已經(jīng)加載完成
        .margin(30)

      Row({ space: 10 }) {
        Button("pushUrl")
          .onClick(() => {
            // 路由到下一個(gè)頁(yè)面，push操作
            router.pushUrl({ url: 'pages/myTest/pageTransitionDst1' });
          })
        Button("back")
          .onClick(() => {
            // 返回到上一頁(yè)面，相當(dāng)于pop操作
            router.back();
          })
      }.justifyContent(FlexAlign.Center)
    }
    .width("100%").height("100%")
    .alignItems(HorizontalAlign.Center)
  }

  pageTransition() {
    // 定義頁(yè)面進(jìn)入時(shí)的效果，從右側(cè)滑入，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生push操作時(shí)該效果才生效
    PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Right)
    // 定義頁(yè)面進(jìn)入時(shí)的效果，從左側(cè)滑入，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生pop操作時(shí)該效果才生效
    PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁(yè)面退出時(shí)的效果，向左側(cè)滑出，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生push操作時(shí)該效果才生效
    PageTransitionExit({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁(yè)面退出時(shí)的效果，向右側(cè)滑出，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生pop操作時(shí)該效果才生效
    PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Right)
  }
}

// PageTransitionDst1
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionDst1 {
  build() {
    Column() {
      Image($r('app.media.forest'))
        .width('90%')
        .height('80%')
        .objectFit(ImageFit.Fill)
        .syncLoad(true) // 同步加載圖片，使頁(yè)面出現(xiàn)時(shí)圖片已經(jīng)加載完成
        .margin(30)

      Row({ space: 10 }) {
        Button("pushUrl")
          .onClick(() => {
            // 路由到下一頁(yè)面，push操作
            router.pushUrl({ url: 'pages/myTest/pageTransitionSrc1' });
          })
        Button("back")
          .onClick(() => {
            // 返回到上一頁(yè)面，相當(dāng)于pop操作
            router.back();
          })
      }.justifyContent(FlexAlign.Center)
    }
    .width("100%").height("100%")
    .alignItems(HorizontalAlign.Center)
  }

  pageTransition() {
    // 定義頁(yè)面進(jìn)入時(shí)的效果，從右側(cè)滑入，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生push操作時(shí)該效果才生效
    PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Right)
    // 定義頁(yè)面進(jìn)入時(shí)的效果，從左側(cè)滑入，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生pop操作時(shí)該效果才生效
    PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁(yè)面退出時(shí)的效果，向左側(cè)滑出，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生push操作時(shí)該效果才生效
    PageTransitionExit({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁(yè)面退出時(shí)的效果，向右側(cè)滑出，時(shí)長(zhǎng)為1000ms，頁(yè)面棧發(fā)生pop操作時(shí)該效果才生效
    PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Right)
  }
}

下面介紹使用了type為None的頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫示例。

// PageTransitionSrc2
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionSrc2 {
  build() {
    Column() {
      Image($r('app.media.mountain'))
        .width('90%')
        .height('80%')
        .objectFit(ImageFit.Fill)
        .syncLoad(true) // 同步加載圖片，使頁(yè)面出現(xiàn)時(shí)圖片已經(jīng)加載完成
        .margin(30)

      Row({ space: 10 }) {
        Button("pushUrl")
          .onClick(() => {
            // 路由到下一頁(yè)面，push操作
            router.pushUrl({ url: 'pages/myTest/pageTransitionDst2' });
          })
        Button("back")
          .onClick(() => {
            // 返回到上一頁(yè)面，相當(dāng)于pop操作
            router.back();
          })
      }.justifyContent(FlexAlign.Center)
    }
    .width("100%").height("100%")
    .alignItems(HorizontalAlign.Center)
  }

  pageTransition() {
    // 定義頁(yè)面進(jìn)入時(shí)的效果，從左側(cè)滑入，時(shí)長(zhǎng)為1000ms，無(wú)論頁(yè)面棧發(fā)生push還是pop操作均可生效
    PageTransitionEnter({ duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁(yè)面退出時(shí)的效果，相對(duì)于正常頁(yè)面位置x方向平移100vp，y方向平移100vp，透明度變?yōu)?，時(shí)長(zhǎng)為1200ms，無(wú)論頁(yè)面棧發(fā)生push還是pop操作均可生效
    PageTransitionExit({ duration: 1200 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}

// PageTransitionDst2
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionDst2 {
  build() {
    Column() {
      Image($r('app.media.forest'))
        .width('90%')
        .height('80%')
        .objectFit(ImageFit.Fill)
        .syncLoad(true) // 同步加載圖片，使頁(yè)面出現(xiàn)時(shí)圖片已經(jīng)加載完成
        .margin(30)

      Row({ space: 10 }) {
        Button("pushUrl")
          .onClick(() => {
            // 路由到下一頁(yè)面，push操作
            router.pushUrl({ url: 'pages/myTest/pageTransitionSrc2' });
          })
        Button("back")
          .onClick(() => {
            // 返回到上一頁(yè)面，相當(dāng)于pop操作
            router.back();
          })
      }.justifyContent(FlexAlign.Center)
    }
    .width("100%").height("100%")
    .alignItems(HorizontalAlign.Center)
  }

  pageTransition() {
    // 定義頁(yè)面進(jìn)入時(shí)的效果，從左側(cè)滑入，時(shí)長(zhǎng)為1200ms，無(wú)論頁(yè)面棧發(fā)生push還是pop操作均可生效
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    // 定義頁(yè)面退出時(shí)的效果，相對(duì)于正常頁(yè)面位置x方向平移100vp，y方向平移100vp，透明度變?yōu)?，時(shí)長(zhǎng)為1000ms，無(wú)論頁(yè)面棧發(fā)生push還是pop操作均可生效
    PageTransitionExit({ duration: 1000 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}