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

要在鸿蒙应用中加入连续翻页动效，关键在于利用动画接口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,
         })
     }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.
   24.
   25.
   26.
   27.

   复制

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)
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.
   24.
   25.
   26.
   27.
   28.
   29.
   30.
   31.

   复制

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;
       })
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.

   复制