#鸿蒙通关秘籍#在HarmonyOS NEXT中实现连续翻页动效的具体步骤是什么？

@Component
struct BookPage {
  @Prop pageNum: number;
  @Prop rotateAngle: number;
  @Prop positionX: string;
  @Prop positionY: string;

  build() {
    Text(`${this.pageNum}`)
      .fontSize(18)
      .fontColor(Color.White)
      .fontWeight(FontWeight.Bold)
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.DarkBlue)
      .width('100px')
      .height('150px')
      .borderRadius(10)
      .rotate({
        x: 0,
        y: 1,
        z: 0,
        angle: this.rotateAngle,
        centerX: this.positionX,
        centerY: this.positionY,
      })
  }
}

Stack() {
  Row() {
    BookPage({ pageNum: 0, rotateAngle: 0, positionX: 'left', positionY: 'center' })
    BookPage({ pageNum: 1, rotateAngle: 0, positionX: 'left', positionY: 'center' })
  }
  Row() {
    BookPage({ pageNum: 2, rotateAngle: 180, positionX: 'center', positionY: 'center' })
    BookPage({ pageNum: 3, rotateAngle: 0, positionX: 'left', positionY: 'center' })
  }
  Divider().strokeWidth(5).color(Color.White).height('150px').vertical(true)
}

function 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;
  })
}

aboutToAppear(): void {
  setInterval(() => {
    this.pageTurningAnimate();
  }, 1000)
}
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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.