From 75713d101557bc6aefda5eb4dba307719cfc31e1 Mon Sep 17 00:00:00 2001 From: duangavin123 Date: Mon, 8 May 2023 03:25:45 +0000 Subject: [PATCH] update zh-cn/third-party-cases/book-flip-animation.md. Signed-off-by: duangavin123 Signed-off-by: duangavin123 --- zh-cn/third-party-cases/book-flip-animation.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/zh-cn/third-party-cases/book-flip-animation.md b/zh-cn/third-party-cases/book-flip-animation.md index c2ba54077b..44ddc1426c 100644 --- a/zh-cn/third-party-cases/book-flip-animation.md +++ b/zh-cn/third-party-cases/book-flip-animation.md @@ -17,7 +17,7 @@ ## 实现思路 -如图，我们分上下两层、左右两侧建立4个文本组件（下文用A、B、C、D代称），左右两侧分别代表打开书籍的左右两面，上下两层堆叠放置。 +如图，分上下两层、左右两侧建立4个文本组件（下文用A、B、C、D代称），左右两侧分别代表打开书籍的左右两面，上下两层堆叠放置。 当B沿旋转轴旋转180度覆盖在A上时，就体现为翻页效果。一个翻页动作的完成包括以下几步： 1. B沿旋转轴旋转180度。 @@ -35,8 +35,8 @@ 1. 创建文本组件。 - 首先，我们看到动效中用到了4个文本组件，我们可以定义一个文本组件，然后对其进行重复调用。创建时我们为其添加[rotate](../application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md)属性，用来控制组件的旋转。 - 由于各组件旋转的角度和旋转中心不同，需要父组件在调用时传入对应的参数，所以我们为对应变量添加[@Prop](../application-dev/quick-start/arkts-prop.md)装饰器，用来控制变量传递。具体代码如下： + 动效中用到了4个文本组件，因此可以先定义一个文本组件，然后对其进行重复调用。同时为文本组件添加[rotate](../application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md)属性，用来控制组件的旋转。 + 由于各组件旋转的角度和旋转中心不同，需要父组件在调用时传入对应的参数，所以需要为对应变量添加[@Prop](../application-dev/quick-start/arkts-prop.md)装饰器，用来控制变量传递。具体代码如下： ``` @Component struct BookCard{ @@ -70,7 +70,7 @@ ``` 2. 创建父组件框架。 - 由于文本组件分为上下两层，所以我们在父组件中采用[Stack](../application-dev/reference/arkui-ts/ts-container-stack.md)组件进行层叠布局。同时使用[Divider](../application-dev/reference/arkui-ts/ts-basic-components-divider.md)组件作为书籍两个页面间的分隔线。具体代码如下： + 由于文本组件分为上下两层，所以在父组件中采用[Stack](../application-dev/reference/arkui-ts/ts-container-stack.md)组件进行层叠布局。同时使用[Divider](../application-dev/reference/arkui-ts/ts-basic-components-divider.md)组件作为书籍两个页面间的分隔线。具体代码如下： ``` @Entry @Component @@ -106,7 +106,7 @@ 3. 添加翻页动效。 - 最后我们通过以下几点来为静态的组件添加动效： + 最后通过以下几点来为静态的组件添加动效： - 根据**实现思路**章节的分析，在父组件中定义对应的变量，并在调用子组件时分别传入子组件。 - 自定义book_animate函数，在其中使用animateTo方法添加动画效果，同时控制动画的时长，以及动画过程中各元素状态的改变。 - 在[aboutToAppear](../application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear)方法中，使用[setInterval](../application-dev/reference/apis/js-apis-timer.md)方法重复调用book_animate函数，以实现连续翻页动效。 @@ -179,7 +179,7 @@ } } ``` - 通过以上步骤我们就可以实现翻页动效了。 + 通过以上步骤就可以实现翻页动效了。 ## 完整代码 示例完整代码如下： -- GitLab