頁面轉(zhuǎn)場動畫

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

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屬性定義不同的頁面轉(zhuǎn)場效果。對于PageTransitionEnter而言，這些效果表示入場時起點值，對于PageTransitionExit而言，這些效果表示退場的終點值，這一點與組件轉(zhuǎn)場transition配置方法類似。此外，PageTransitionEnter提供了onEnter接口進行自定義頁面入場動畫的回調(diào)，PageTransitionExit提供了onExit接口進行自定義頁面退場動畫的回調(diào)。

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

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

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

假設(shè)頁面棧為標準實例模式，即頁面棧中允許存在重復(fù)的頁面?？赡軙?種場景，對應(yīng)的頁面轉(zhuǎn)場效果如下表。

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

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

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

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

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

通過設(shè)置頁面轉(zhuǎn)場的時長為0，可使該頁面無頁面轉(zhuǎn)場動畫。

// 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) // 同步加載圖片，使頁面出現(xiàn)時圖片已經(jīng)加載完成
        .margin(30)

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

  pageTransition() {
    // 定義頁面進入時的效果，從右側(cè)滑入，時長為1000ms，頁面棧發(fā)生push操作時該效果才生效
    PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Right)
    // 定義頁面進入時的效果，從左側(cè)滑入，時長為1000ms，頁面棧發(fā)生pop操作時該效果才生效
    PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁面退出時的效果，向左側(cè)滑出，時長為1000ms，頁面棧發(fā)生push操作時該效果才生效
    PageTransitionExit({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁面退出時的效果，向右側(cè)滑出，時長為1000ms，頁面棧發(fā)生pop操作時該效果才生效
    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) // 同步加載圖片，使頁面出現(xiàn)時圖片已經(jīng)加載完成
        .margin(30)

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

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

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

// 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) // 同步加載圖片，使頁面出現(xiàn)時圖片已經(jīng)加載完成
        .margin(30)

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

  pageTransition() {
    // 定義頁面進入時的效果，從左側(cè)滑入，時長為1000ms，無論頁面棧發(fā)生push還是pop操作均可生效
    PageTransitionEnter({ duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁面退出時的效果，相對于正常頁面位置x方向平移100vp，y方向平移100vp，透明度變?yōu)?，時長為1200ms，無論頁面棧發(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) // 同步加載圖片，使頁面出現(xiàn)時圖片已經(jīng)加載完成
        .margin(30)

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

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