#鸿蒙通关秘籍#如何为鸿蒙应用添加连续翻页动效？

要在鸿蒙应用中加入连续翻页动效，关键在于利用动画接口animateTo和定时器setInterval来协调页面的每一次翻转过程。

1. 建立基本的组件结构，创建一个文本组件BookPage，该组件包含旋转属性。

   @Component
   struct BookPage {
     @Prop pageNum: number;
     @Prop rotateAngle: number;
     @Prop positionX: string;
     @Prop positionY: string;
   
     build() {
       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({
           x: 0,
           y: 1,
           z: 0,
           angle: this.rotateAngle,
           centerX: this.positionX,
           centerY: this.positionY,
         })
     }
   }
   

2. 采用层叠布局(Stack)组件以分别显示上下层的页面。

   Stack() {
     Row() {
       BookPage({
         pageNum: this.pageNumTextC,
         rotateAngle: this.originalAngle,
         positionX: this.leftX,
         positionY: this.leftY
       })
       BookPage({
         pageNum: this.nextPageNumTextD,
         rotateAngle: this.originalAngle,
         positionX: this.leftX,
         positionY: this.leftY
       })
     }
     Row() {
       BookPage({
         pageNum: this.pageNumTextA,
         rotateAngle: this.rotateAngleTextA,
         positionX: this.centerX,
         positionY: this.centerY
       })
       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)
   }
   

3. 利用setInterval不断触发翻页动画pageTurningAnimate函数，在该函数中使用animateTo添加旋转动效。

   aboutToAppear(): void {
     setInterval(() => {
       this.pageTurningAnimate();
     }, 1000)
   }
   
   private pageTurningAnimate() {
     animateTo(
       { duration: 700, onFinish: () => {
         this.pageNumTextA = this.animatePageNumTextB;
         this.rotateAngleTextA = 180;
         this.rotateAngleTextB = 0;
         this.animatePageNumTextB = (this.animatePageNumTextB + 1) % 8;
       }},
       () => {
         this.rotateAngleTextB = 180;
         this.nextPageNumTextD = this.animatePageNumTextB + 1;
       })
   }