翻頁(yè)動(dòng)效是應(yīng)用開(kāi)發(fā)中常見(jiàn)的動(dòng)效場(chǎng)景，常見(jiàn)的如書(shū)籍翻頁(yè)、日歷翻頁(yè)等。

本文就為大家舉例講解如何通過(guò) ArkUI 提供的顯示動(dòng)畫(huà)接口 animateTo 實(shí)現(xiàn)書(shū)籍翻頁(yè)的效果。

效果呈現(xiàn)

本例最終實(shí)現(xiàn)效果如下：

環(huán)境要求

本例基于以下環(huán)境開(kāi)發(fā)，開(kāi)發(fā)者也可以基于其他適配的版本進(jìn)行開(kāi)發(fā)：

IDE：DevEco Studio 3.1 Beta1

SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)

實(shí)現(xiàn)思路

如圖，分上下兩層、左右兩側(cè)建立 4 個(gè)文本組件（下文用 A、B、C、D 代稱），左右兩側(cè)分別代表打開(kāi)書(shū)籍的左右兩面，上下兩層堆疊放置。

當(dāng) B 沿旋轉(zhuǎn)軸旋轉(zhuǎn) 180 度覆蓋在 A 上時(shí)，就體現(xiàn)為翻頁(yè)效果。一個(gè)翻頁(yè)動(dòng)作的完成包括以下幾步：

①B 沿旋轉(zhuǎn)軸旋轉(zhuǎn) 180 度。

②B 旋轉(zhuǎn)時(shí)，D 會(huì)在右側(cè)顯示出來(lái)，作為書(shū)籍的下一頁(yè)，此時(shí) D 承載的內(nèi)容要變?yōu)橄乱豁?yè)的內(nèi)容。

③B 旋轉(zhuǎn)到左側(cè)后，A 承載的內(nèi)容變?yōu)?B 的內(nèi)容。

④由于 A 和 B 互為鏡像，所以 A 顯示為 B 的內(nèi)容后，需要以 A 的中間為軸旋轉(zhuǎn) 180 度。

⑤B 重新旋轉(zhuǎn)到右邊，其承載的內(nèi)容變?yōu)橄乱豁?yè)的內(nèi)容。

說(shuō)明：C 用來(lái)占位，不需要做動(dòng)作。連續(xù)重復(fù)上述動(dòng)作即可實(shí)現(xiàn)連續(xù)翻頁(yè)動(dòng)效。

開(kāi)發(fā)步驟

①創(chuàng)建文本組件

動(dòng)效中用到了 4 個(gè)文本組件，因此可以先定義一個(gè)文本組件，然后對(duì)其進(jìn)行重復(fù)調(diào)用。同時(shí)為文本組件添加 rotate 屬性，用來(lái)控制組件的旋轉(zhuǎn)。

由于各組件旋轉(zhuǎn)的角度和旋轉(zhuǎn)中心不同，需要父組件在調(diào)用時(shí)傳入對(duì)應(yīng)的參數(shù)，所以需要為對(duì)應(yīng)變量添加 @Prop 裝飾器，用來(lái)控制變量傳遞。

具體代碼如下：

@Component
structBookCard{
//為變量添加@Prop裝飾器，用于接收父組件的動(dòng)態(tài)傳參
@Propnum:number
@Propy_position:string
@Propx_position:string
@Proprotate_angle:number
build(){
Text(`${this.num}`)
.fontWeight(FontWeight.Bold)
.backgroundColor('#18183C')
.fontColor('white')
.fontSize(80)
.width('25%')
.height('30%')
.fontFamily('Monospace')
.textAlign(TextAlign.Center)
.borderRadius(20)
//使用rotate屬性控制旋轉(zhuǎn)
.rotate({
x:0,
y:1,
z:0,
angle:this.rotate_angle,
centerY:this.y_position,
centerX:this.x_position
})
}
}

②創(chuàng)建父組件框架

由于文本組件分為上下兩層，所以在父組件中采用 Stack 組件進(jìn)行層疊布局。

同時(shí)使用 Divider 組件作為書(shū)籍兩個(gè)頁(yè)面間的分隔線。

具體代碼如下：

@Entry
@Component
structBookAnimation{

build(){
Stack(){
Row(){
//組件C
BookCard()
//組件D
BookCard()
}
Row(){
//組件A
BookCard()
//組件B
BookCard()
}
//添加兩個(gè)頁(yè)面間的分隔線
Divider()
.strokeWidth(5)
.color('white')
.height('26%')
.vertical(true)
}
.width('100%')
.height('100%')
.backgroundColor('#A4AE77')
}
}

③添加翻頁(yè)動(dòng)效

最后通過(guò)以下幾點(diǎn)來(lái)為靜態(tài)的組件添加動(dòng)效：

根據(jù)實(shí)現(xiàn)思路章節(jié)的分析，在父組件中定義對(duì)應(yīng)的變量，并在調(diào)用子組件時(shí)分別傳入子組件。

自定義 book_animate 函數(shù)，在其中使用 animateTo 方法添加動(dòng)畫(huà)效果，同時(shí)控制動(dòng)畫(huà)的時(shí)長(zhǎng)，以及動(dòng)畫(huà)過(guò)程中各元素狀態(tài)的改變。

在 aboutToAppear 方法中，使用 setInterval 方法重復(fù)調(diào)用 book_animate 函數(shù)，以實(shí)現(xiàn)連續(xù)翻頁(yè)動(dòng)效。

具體代碼如下：

@Entry
@Component
structBookAnimation{
//父組件變量設(shè)置，注意使用@State做狀態(tài)管理
@Staterotate_angle1:number=0
@Staterotate_angle2:number=0
@Staterotate_angle3:number=0
@Statenum_before:number=0;
@Statenum:number=1;
@Statenum_next:number=0;
@Statey_center1:string='50%'
@Statex_center1:string='50%'
@Statey_center2:string='0%'
@Statex_center2:string='0%'

//在UI顯示前，傳入各項(xiàng)變量的具體值
aboutToAppear(){
//通過(guò)setInterval函數(shù)每秒調(diào)用一次動(dòng)畫(huà)效果，實(shí)現(xiàn)連續(xù)翻頁(yè)
setInterval(()=>{
this.book_animate()
},1000)//函數(shù)調(diào)用周期要大于每次動(dòng)畫(huà)持續(xù)的時(shí)長(zhǎng)
}

privatebook_animate(){
//通過(guò)animateTo方法為組件添加動(dòng)效，動(dòng)效時(shí)長(zhǎng)要小于setInterval函數(shù)調(diào)用周期
animateTo({duration:700,onFinish:()=>{
//動(dòng)畫(huà)結(jié)束時(shí)，A顯示的數(shù)字跟B顯示的數(shù)字相等
this.num_before=this.num
//動(dòng)畫(huà)結(jié)束時(shí)，A以中心線為軸旋轉(zhuǎn)180度
this.rotate_angle3=180
//動(dòng)畫(huà)結(jié)束時(shí)，B返回至初始狀態(tài)
this.rotate_angle1=0
//動(dòng)畫(huà)結(jié)束時(shí)，B顯示的數(shù)字加1
this.num=(this.num+1)%10
}
},()=>{
//動(dòng)畫(huà)開(kāi)始，B的旋轉(zhuǎn)角度變?yōu)?80度
this.rotate_angle1=180
//動(dòng)畫(huà)開(kāi)始，D的數(shù)字加1
this.num_next=this.num+1
})
}
build(){
Stack(){
Row(){
//C組件的引用配置
BookCard({num:0,rotate_angle:this.rotate_angle2,
y_position:this.y_center2,x_position:this.x_center2})
//D組件的引用配置
BookCard({num:this.num_next,rotate_angle:this.rotate_angle2,
y_position:this.y_center2,x_position:this.x_center2})
}
Row(){
//A組件的引用配置
BookCard({num:this.num_before,rotate_angle:this.rotate_angle3,
y_position:this.y_center1,x_position:this.x_center1})
//B組件的引用配置
BookCard({num:this.num,rotate_angle:this.rotate_angle1,
y_position:this.y_center2,x_position:this.x_center2})
}
Divider().strokeWidth(5).color('white').height('26%').vertical(true)
}.width('100%').height('50%').backgroundColor('#A4AE77')
}
}

通過(guò)以上步驟就可以實(shí)現(xiàn)翻頁(yè)動(dòng)效了。

完整代碼

示例完整代碼如下：

@Component
structBookCard{
@Propnum:number
@Propy_position:string
@Propx_position:string
@Proprotate_angle:number
build(){
Text(`${this.num}`)
.fontWeight(FontWeight.Bold)
.backgroundColor('#18183C')
.fontColor('white')
.fontSize(80)
.width('25%')
.height('30%')
.fontFamily('Monospace')
.textAlign(TextAlign.Center)
.borderRadius(20)
.rotate({
x:0,
y:1,
z:0,
angle:this.rotate_angle,
centerY:this.y_position,
centerX:this.x_position
})
}
}


@Entry
@Component
structBookAnimation{
@Staterotate_angle1:number=0
@Staterotate_angle2:number=0
@Staterotate_angle3:number=0
@Statenum_before:number=0;
@Statenum:number=1;
@Statenum_next:number=0;
@Statey_center1:string='50%'
@Statex_center1:string='50%'
@Statey_center2:string='0%'
@Statex_center2:string='0%'


aboutToAppear(){
setInterval(()=>{
this.book_animate()
},1000)
}

privatebook_animate(){
animateTo({duration:700,onFinish:()=>{
this.num_before=this.num
this.rotate_angle3=180
this.rotate_angle1=0
this.num=(this.num+1)%10
}
},()=>{
this.rotate_angle1=180
this.num_next=this.num+1
})
}


build(){
Stack(){
Row(){
BookCard({num:0,rotate_angle:this.rotate_angle2,y_position:this.y_center2,
x_position:this.x_center2})
BookCard({num:this.num_next,rotate_angle:this.rotate_angle2,y_position:this.y_center2,
x_position:this.x_center2})
}
Row(){
BookCard({num:this.num_before,rotate_angle:this.rotate_angle3,y_position:this.y_center1,
x_position:this.x_center1})
BookCard({num:this.num,rotate_angle:this.rotate_angle1,y_position:this.y_center2,
x_position:this.x_center2})
}
Divider().strokeWidth(5).color('white').height('26%').vertical(true)
}.width('100%').height('50%').backgroundColor('#A4AE77')
}
}

總結(jié)

OpenHarmony 當(dāng)前提供了相對(duì)比較豐富的能力可以在制作動(dòng)效時(shí)使用，基本可以滿足日常動(dòng)畫(huà)的開(kāi)發(fā)，比如平移、旋轉(zhuǎn)、放大縮小、彈簧曲線、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)、三維動(dòng)畫(huà)等等。 大家可以根據(jù)業(yè)務(wù)需要組合使用，也歡迎大家將自己的經(jīng)驗(yàn)分享出來(lái)，我們一起學(xué)習(xí)啦！

審核編輯：劉清