鴻蒙HarmonyOS實戰-ArkUI動畫（頁面轉場動畫）

蜀道山QAQ發表於2024-04-24
鴻蒙UI動畫

🚀前言

頁面轉場動畫是指在應用程式中，當使用者導航到另一個頁面時，使用動畫效果來過渡頁面之間的切換。這樣做的目的是為了提升使用者體驗，使頁面之間的切換更加平滑和有趣。

常見的頁面轉場動畫包括淡入淡出、滑動、翻轉、縮放等效果。透過使用這些動畫效果，可以給使用者一種流暢的感覺，讓頁面之間的切換更加自然。

在實現頁面轉場動畫時，可以根據具體的需求和設計來選擇合適的轉場效果，並結合頁面的佈局和內容來調整動畫效果的細節。

頁面轉場動畫是一種透過使用動畫效果來過渡頁面切換的方式，旨在提升使用者體驗，使頁面之間的切換更加平滑和有趣。

🚀一、頁面轉場動畫

🔎1.type配置

PageTransitionEnter和PageTransitionExit的介面為：

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

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

在HarmonyOS中，PageTransitionEnter和PageTransitionExit是用於控制頁面切換動畫的引數。它們分別表示頁面進入和退出時的動畫。

  1. type（動畫型別）：表示動畫的型別，可以取以下幾種值：
  • NONE：表示對頁面棧的push、pop操作均生效，type的預設值為RouteType.None。
  • Push：表示僅對頁面棧的push操作生效。
  • Pop：表示僅對頁面棧的pop操作生效。

  1. duration（動畫時長）：表示動畫的時長，單位為毫秒。

  2. curve（動畫曲線）：表示動畫的變化曲線。

  3. delay（動畫延遲）：表示動畫的延遲時間，單位為毫秒。

頁面A

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

頁面B

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

透過設定頁面轉場的時長為0，可使該頁面無頁面轉場動畫。

🔎2.場景示例

頁面A

// PageTransitionSrc1
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionSrc1 {
  build() {
    Column() {
      Image($r('app.media.img_2'))
        .width('90%')
        .height('80%')
        .objectFit(ImageFit.Fill)
        .syncLoad(true) // 同步載入圖片，使頁面出現時圖片已經載入完成
        .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() {
    // 定義頁面進入時的效果，從右側滑入，時長為1000ms，頁面棧發生push操作時該效果才生效
    PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Right)
    // 定義頁面進入時的效果，從左側滑入，時長為1000ms，頁面棧發生pop操作時該效果才生效
    PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁面退出時的效果，向左側滑出，時長為1000ms，頁面棧發生push操作時該效果才生效
    PageTransitionExit({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁面退出時的效果，向右側滑出，時長為1000ms，頁面棧發生pop操作時該效果才生效
    PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Right)
  }
}

頁面B

// PageTransitionDst1
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionDst1 {
  build() {
    Column() {
      Image($r('app.media.img_2'))
        .width('90%')
        .height('80%')
        .objectFit(ImageFit.Fill)
        .syncLoad(true) // 同步載入圖片，使頁面出現時圖片已經載入完成
        .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() {
    // 定義頁面進入時的效果，從右側滑入，時長為1000ms，頁面棧發生push操作時該效果才生效
    PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Right)
    // 定義頁面進入時的效果，從左側滑入，時長為1000ms，頁面棧發生pop操作時該效果才生效
    PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁面退出時的效果，向左側滑出，時長為1000ms，頁面棧發生push操作時該效果才生效
    PageTransitionExit({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定義頁面退出時的效果，向右側滑出，時長為1000ms，頁面棧發生pop操作時該效果才生效
    PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Right)
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章