1# 如何通过显示动画实现书籍翻页动效
2
3## 场景介绍
4
5翻页动效是应用开发中常见的动效场景，常见的如书籍翻页、日历翻页等。本文就为大家举例讲解如何通过ArkUI提供的显示动画接口[animateTo](../application-dev/reference/apis-arkui/arkui-ts/ts-explicit-animation.md)实现书籍翻页的效果。
6
7## 效果呈现
8
9本例最终实现效果如下：
10
11![翻页动效示例图](figures/book-flip-animation.gif)
12
13## 环境要求
14
15- IDE：DevEco Studio 3.1 Beta1
16- SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
17
18## 实现思路
19
20如图，分上下两层、左右两侧建立4个文本组件（下文用A、B、C、D代称），左右两侧分别代表打开书籍的左右两面，上下两层堆叠放置。
21当B沿旋转轴旋转180度覆盖在A上时，就体现为翻页效果。一个翻页动作的完成包括以下几步：
22
231. B沿旋转轴旋转180度。
242. B旋转时，D会在右侧显示出来，作为书籍的下一页，此时D承载的内容要变为下一页的内容。
253. B旋转到左侧后，A承载的内容变为B的内容。
264. 由于A和B互为镜像，所以A显示为B的内容后，需要以A的中间为轴旋转180度。
275. B重新旋转到右边，其承载的内容变为下一页的内容。
28
29***说明：C用来占位，不需要做动作。***
30连续重复上述动作即可实现连续翻页动效。
31
32![翻页动效](figures/book-flip-logic.png)
33
34## 开发步骤
35
361. 创建文本组件。
37
38    动效中用到了4个文本组件，因此可以先定义一个文本组件，然后对其进行重复调用。同时为文本组件添加[rotate](../application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-transformation.md)属性，用来控制组件的旋转。
39    由于各组件旋转的角度和旋转中心不同，需要父组件在调用时传入对应的参数，所以需要为对应变量添加[@Prop](../application-dev/quick-start/arkts-prop.md)装饰器，用来控制变量传递。具体代码如下：
40    ```ts
41    @Component
42    struct BookCard{
43      // 为变量添加@Prop装饰器，用于接收父组件的动态传参
44      @Prop num:number
45      @Prop y_position:string
46      @Prop x_position:string
47      @Prop rotate_angle:number
48      build(){
49        Text(`${this.num}`)
50          .fontWeight(FontWeight.Bold)
51          .backgroundColor('#18183C')
52          .fontColor('white')
53          .fontSize(80)
54          .width('25%')
55          .height('30%')
56          .fontFamily('Monospace')
57          .textAlign(TextAlign.Center)
58          .borderRadius(20)
59          // 使用rotate属性控制旋转
60          .rotate({
61            x: 0,
62            y: 1,
63            z: 0,
64            angle: this.rotate_angle,
65            centerY: this.y_position,
66            centerX: this.x_position
67          })
68      }
69    }
70    ```
712. 创建父组件框架。
72
73    由于文本组件分为上下两层，所以在父组件中采用[Stack](../application-dev/reference/apis-arkui/arkui-ts/ts-container-stack.md)组件进行层叠布局。同时使用[Divider](../application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-divider.md)组件作为书籍两个页面间的分隔线。具体代码如下：
74    ```ts
75    @Entry
76    @Component
77    struct BookAnimation {
78
79      build(){
80        Stack(){
81          Row(){
82            // 组件C
83            BookCard()
84            // 组件D
85            BookCard()
86          }
87          Row(){
88            // 组件A
89            BookCard()
90            // 组件B
91            BookCard()
92          }
93          // 添加两个页面间的分隔线
94          Divider()
95          .strokeWidth(5)
96          .color('white')
97          .height('26%')
98          .vertical(true)
99        }
100        .width('100%')
101        .height('100%')
102        .backgroundColor('#A4AE77')
103      }
104    }
105    ```
106
1073. 添加翻页动效。
108
109    最后通过以下几点来为静态的组件添加动效：
110    - 根据**实现思路**章节的分析，在父组件中定义对应的变量，并在调用子组件时分别传入子组件。
111    - 自定义book_animate函数，在其中使用animateTo方法添加动画效果，同时控制动画的时长，以及动画过程中各元素状态的改变。
112    - 在[aboutToAppear](../application-dev/reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear)方法中，使用[setInterval](../application-dev/reference/common/js-apis-timer.md)方法重复调用book_animate函数，以实现连续翻页动效。
113    具体代码如下：
114    ```ts
115    @Entry
116    @Component
117    struct BookAnimation {
118      // 父组件变量设置，注意使用@State做状态管理
119      @State rotate_angle1:number = 0
120      @State rotate_angle2:number = 0
121      @State rotate_angle3:number = 0
122      @State num_before: number = 0;
123      @State num: number = 1;
124      @State num_next: number = 0;
125      @State y_center1:string = '50%'
126      @State x_center1:string = '50%'
127      @State y_center2:string = '0%'
128      @State x_center2:string = '0%'
129
130      // 在UI显示前，传入各项变量的具体值
131      aboutToAppear() {
132        // 通过setInterval函数每秒调用一次动画效果，实现连续翻页
133        setInterval(() => {
134          this.book_animate()
135        }, 1000)//函数调用周期要大于每次动画持续的时长
136      }
137
138      private book_animate(){
139        // 通过animateTo方法为组件添加动效，动效时长要小于setInterval函数调用周期
140        animateTo({ duration:700,onFinish:()=>{
141          // 动画结束时，A显示的数字跟B显示的数字相等
142          this.num_before = this.num
143          // 动画结束时，A以中心线为轴旋转180度
144          this.rotate_angle3 = 180
145          // 动画结束时，B返回至初始状态
146          this.rotate_angle1 = 0
147          // 动画结束时，B显示的数字加1
148          this.num = (this.num + 1) % 10
149        }
150        },()=>{
151          // 动画开始，B的旋转角度变为180度
152          this.rotate_angle1 = 180
153          // 动画开始，D的数字加1
154          this.num_next = this.num+1
155        })
156      }
157
158
159      build() {
160        Stack(){
161          Row(){
162            // C组件的引用配置
163            BookCard({num:0,rotate_angle:this.rotate_angle2,
164            y_position:this.y_center2,x_position:this.x_center2})
165            // D组件的引用配置
166            BookCard({num:this.num_next,rotate_angle:this.rotate_angle2,
167            y_position:this.y_center2,x_position:this.x_center2})
168          }
169          Row(){
170            // A组件的引用配置
171            BookCard({num:this.num_before,rotate_angle:this.rotate_angle3,
172            y_position:this.y_center1,x_position:this.x_center1})
173            // B组件的引用配置
174            BookCard({num:this.num,rotate_angle:this.rotate_angle1,
175            y_position:this.y_center2,x_position:this.x_center2})
176          }
177          Divider().strokeWidth(5).color('white').height('26%').vertical(true)
178        }.width('100%').height('50%').backgroundColor('#A4AE77')
179      }
180    }
181    ```
182    通过以上步骤就可以实现翻页动效了。
183
184## 完整代码
185示例完整代码如下：
186```ts
187@Component
188struct BookCard{
189  @Prop num:number
190  @Prop y_position:string
191  @Prop x_position:string
192  @Prop rotate_angle:number
193  build(){
194    Text(`${this.num}`)
195      .fontWeight(FontWeight.Bold)
196      .backgroundColor('#18183C')
197      .fontColor('white')
198      .fontSize(80)
199      .width('25%')
200      .height('30%')
201      .fontFamily('Monospace')
202      .textAlign(TextAlign.Center)
203      .borderRadius(20)
204      .rotate({
205        x: 0,
206        y: 1,
207        z: 0,
208        angle: this.rotate_angle,
209        centerY: this.y_position,
210        centerX: this.x_position
211      })
212  }
213}
214
215
216@Entry
217@Component
218struct BookAnimation {
219  @State rotate_angle1:number = 0
220  @State rotate_angle2:number = 0
221  @State rotate_angle3:number = 0
222  @State num_before: number = 0;
223  @State num: number = 1;
224  @State num_next: number = 0;
225  @State y_center1:string = '50%'
226  @State x_center1:string = '50%'
227  @State y_center2:string = '0%'
228  @State x_center2:string = '0%'
229
230
231  aboutToAppear() {
232    setInterval(() => {
233      this.book_animate()
234    }, 1000)
235  }
236
237  private book_animate(){
238    animateTo({ duration:700,onFinish:()=>{
239      this.num_before = this.num
240      this.rotate_angle3 = 180
241      this.rotate_angle1 = 0
242      this.num = (this.num + 1) % 10
243    }
244    },()=>{
245      this.rotate_angle1 = 180
246      this.num_next = this.num+1
247    })
248  }
249
250
251  build() {
252    Stack(){
253      Row(){
254        BookCard({num:0,rotate_angle:this.rotate_angle2,y_position:this.y_center2,
255        x_position:this.x_center2})
256        BookCard({num:this.num_next,rotate_angle:this.rotate_angle2,y_position:this.y_center2,
257        x_position:this.x_center2})
258      }
259      Row(){
260        BookCard({num:this.num_before,rotate_angle:this.rotate_angle3,y_position:this.y_center1,
261        x_position:this.x_center1})
262        BookCard({num:this.num,rotate_angle:this.rotate_angle1,y_position:this.y_center2,
263        x_position:this.x_center2})
264      }
265      Divider().strokeWidth(5).color('white').height('26%').vertical(true)
266    }.width('100%').height('50%').backgroundColor('#A4AE77')
267  }
268}
269```
270