介紹 翻頁動效是應用開發中常見的動效場景，常見的有書籍翻頁，日曆翻頁等。本例將介紹如何通過ArkUI提供的顯示動畫介面animateTo實現翻頁的效果。 效果圖預覽 使用說明 本例通過setInterval函數每秒調用一次翻頁動畫，實現連續翻頁效果。 實現思路 如圖，左右兩側分別代表打開書籍的左右兩 ...
介紹
翻頁動效是應用開發中常見的動效場景，常見的有書籍翻頁，日曆翻頁等。本例將介紹如何通過ArkUI提供的顯示動畫介面animateTo實現翻頁的效果。
效果圖預覽
使用說明
- 本例通過setInterval函數每秒調用一次翻頁動畫，實現連續翻頁效果。
實現思路
如圖，左右兩側分別代表打開書籍的左右兩面，上下兩層用Stack組件堆疊放置。在上下兩層，左右兩側，建立4個文本組件（下麵用A、B、C、D代稱）。當B沿旋轉軸旋轉180度覆蓋在A上時，就體現為翻頁效果。C用來占位，不需要做動作。一個翻頁動作的完成包括以下幾步：
- B沿旋轉軸旋轉180度。這裡B的旋轉是動畫效果。
- B旋轉時，D會在右側顯示出來，作為書籍的下一頁，此時D承載的內容要變為下一頁的內容。
- B旋轉到左側後，A承載的內容變為B的內容。
- 由於A和B互為鏡像，所以A顯示為B的內容後，需要以A的縱向中線為軸旋轉180度。這裡A的旋轉是設置旋轉角度值，是瞬時刷新反向顯示的效果，不是動畫。
- B重新旋轉到右邊（即B重置回右側位置），其承載的內容變為下一頁的內容。
- 連續重覆上述動作即可實現連續翻頁動效。
開發步驟：
- 創建文本組件。動效中用到了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,
})
}
}
- 創建父組件框架。由於文本組件分為上下兩層，所以在父組件中採用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)
}
...
- 添加翻頁動效。在父組件中定義對應的變數，併在調用子組件時分別傳入子組件。自定義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 // 視圖層-翻頁動效頁面
模塊依賴
不涉及
