HarmonyOS NEXT應用開發—翻頁動效案例

生活就是这么怪發表於2024-04-20

介紹

翻頁動效是應用開發中常見的動效場景，常見的有書籍翻頁，日曆翻頁等。本例將介紹如何透過ArkUI提供的顯示動畫介面animateTo實現翻頁的效果。

效果圖預覽

image

使用說明

  1. 本例透過setInterval函式每秒呼叫一次翻頁動畫，實現連續翻頁效果。

實現思路

image

如圖，左右兩側分別代表開啟書籍的左右兩面，上下兩層用Stack元件堆疊放置。在上下兩層，左右兩側，建立4個文字元件（下面用A、B、C、D代稱）。當B沿旋轉軸旋轉180度覆蓋在A上時，就體現為翻頁效果。C用來佔位，不需要做動作。一個翻頁動作的完成包括以下幾步：

  1. B沿旋轉軸旋轉180度。這裡B的旋轉是動畫效果。
  2. B旋轉時，D會在右側顯示出來，作為書籍的下一頁，此時D承載的內容要變為下一頁的內容。
  3. B旋轉到左側後，A承載的內容變為B的內容。
  4. 由於A和B互為映象，所以A顯示為B的內容後，需要以A的縱向中線為軸旋轉180度。這裡A的旋轉是設定旋轉角度值，是瞬時重新整理反向顯示的效果，不是動畫。
  5. B重新旋轉到右邊（即B重置回右側位置），其承載的內容變為下一頁的內容。
  6. 連續重複上述動作即可實現連續翻頁動效。

開發步驟：

  1. 建立文字元件。動效中用到了4個文字元件，可以定義一個文字元件BookPage，然後對其進行重複呼叫。建立時為其新增rotate屬性，用來控制元件旋轉。由於各元件旋轉的角度和旋轉中心不同，需要父元件在呼叫時傳入對應的引數，所以為對應變數新增@Prop裝飾器，用來控制變數傳遞。原始碼參考PageTurningAnimation.ets。
@Component
struct BookPage {
  // 為變數新增@Prop裝飾器，用於接收父元件的動態傳參
  @Prop pageNum: number; // 頁面編號
  @Prop rotateAngle: number; // 旋轉角度
  @Prop positionX: string; // 旋轉中心點引數x,表示水平方向上旋轉起始位置
  @Prop positionY: string; // 旋轉中心點引數y,表示垂直方向上旋轉起始位置

  build() {
    // TODO: 知識點: 建立文字元件。建立時新增rotate屬性，用來控制元件旋轉。
    Text(`${this.pageNum}`)
      .fontSize($r('app.integer.common_font_size'))
      .fontColor(Color.White)
      .fontWeight(FontWeight.Bold)
      .textAlign(TextAlign.Center)
      .backgroundColor($r('app.color.common_color_dark_blue'))
      .width($r('app.string.common_text_width'))
      .height($r('app.string.common_text_height'))
      .borderRadius($r('app.integer.common_border_radius'))
      .rotate({ // 使用rotate屬性控制旋轉
        x: 0,
        y: 1, // 指定y軸作為旋轉軸
        z: 0,
        angle: this.rotateAngle,
        centerX: this.positionX,
        centerY: this.positionY,
      })
  }
}
  1. 建立父元件框架。由於文字元件分為上下兩層，所以在父元件中採用Stack元件進行層疊佈局。同時使用Divider元件作為書籍兩個頁面間的分隔線。原始碼參考PageTurningAnimation.ets。
...
Stack() {
  // 下層Row
  Row() {
    // Text元件C，用於佔位不顯示，在Text元件A的下層
    BookPage({
      pageNum: this.pageNumTextC,
      rotateAngle: this.originalAngle,
      positionX: this.leftX,
      positionY: this.leftY
    })
    // Text元件D，用於重新整理下一個翻頁的頁面編號
    BookPage({
      pageNum: this.nextPageNumTextD,
      rotateAngle: this.originalAngle,
      positionX: this.leftX,
      positionY: this.leftY
    })
  }

  // 上層Row
  Row() {
    // Text元件A的頁面編號，用於重新整理翻頁動畫結束時的頁面編號
    BookPage({
      pageNum: this.pageNumTextA,
      rotateAngle: this.rotateAngleTextA,
      positionX: this.centerX,
      positionY: this.centerY
    })
    // Text元件B的頁面編號，用於顯示翻頁動畫的頁面編號
    BookPage({
      pageNum: this.animatePageNumTextB,
      rotateAngle: this.rotateAngleTextB,
      positionX: this.leftX,
      positionY: this.leftY
    })
  }

  // 新增兩個頁面間的分隔線
  Divider().strokeWidth(5).color(Color.White).height($r('app.string.divider_height')).vertical(true)
}
...
  1. 新增翻頁動效。在父元件中定義對應的變數，並在呼叫子元件時分別傳入子元件。自定義pageTurningAnimate函式，在其中使用animateTo方法新增動畫效果，同時控制動畫的時長，以及動畫過程中各元素狀態的改變。在aboutToAppear方法中，使用setInterval方法重複呼叫pageTurningAnimate函式，以實現連續翻頁動效。原始碼參考PageTurningAnimation.ets。
...
// 在UI顯示前，傳入各項變數的具體值
aboutToAppear(): void {
  // 透過setInterval函式每秒呼叫一次動畫效果，實現連續翻頁
  setInterval(() => {
    this.pageTurningAnimate();
  }, 1000) // 函式呼叫週期要大於每次動畫持續的時長
}

// 透過animateTo方法為元件新增動效，動效時長要小於setInterval函式呼叫週期
private pageTurningAnimate() {
  // TODO: 知識點: 使用animateTo方法新增動畫效果，同時控制動畫的時長，以及動畫過程中各元素狀態的改變。
  animateTo(
    { duration: 700, onFinish: () => {
      // 動畫結束時，Text元件A顯示的頁面編號和B顯示的頁面編號相等
      this.pageNumTextA = this.animatePageNumTextB;
      // 動畫結束時，Text元件A以中心線為軸旋轉180度，用於顯示左側翻頁動畫結束時的頁面編號
      this.rotateAngleTextA = 180;
      // 動畫結束時，Text元件B的旋轉角度重置為0度
      this.rotateAngleTextB = 0;
      // 動畫結束時，Text元件B顯示的頁面編號加1
      this.animatePageNumTextB = (this.animatePageNumTextB + 1) % 8;
    } },
    () => {
      // 動畫開始，Text元件B的旋轉角度設定為180度
      this.rotateAngleTextB = 180;
      //動畫開始，Text元件D的頁面編號加1，用於重新整理顯示下一個翻頁的頁面編號
      this.nextPageNumTextD = this.animatePageNumTextB + 1;
    })
}
...

高效能知識點

不涉及

工程結構&模組型別

pageturninganimation                           // har型別
|---src\main\ets\view
|   |---PageTurningAnimation.ets               // 檢視層-翻頁動效頁面

模組依賴

不涉及

參考資料

顯式動畫

相關文章