From 3eee8fa165a8ee15d43712d84fecd60ac6540dc3 Mon Sep 17 00:00:00 2001
From: luoying_ace <luoying19@huawei.com>
Date: Fri, 28 Oct 2022 04:02:59 +0000
Subject: [PATCH] update
 zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md.

Signed-off-by: luoying_ace <luoying19@huawei.com>
---
 .../arkui-ts/ts-explicit-animation.md         | 63 ++++++++++---------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
index ec4a119e6b..fec478c62d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
@@ -1,16 +1,18 @@
 # 显式动画
 
-提供显示动画接口。
+提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
 
 >  **说明：**
 >
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-| 接口名称                                                     | 功能描述                                                     |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| animateTo(value:&nbsp;[AnimateParam](#animateparam对象说明),&nbsp;event:&nbsp;()=&gt;&nbsp;void)&nbsp;:&nbsp;void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。<br/>event指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
+animateTo(value: AnimateParam, event: () => void): void
 
+| 参数             | 类型        |       是否必填     |        描述        |
+| ---------------- | ------------ | -------------------- | -------------------- |
+| value | [AnimateParam](#animateparam对象说明) | 是 | 设置动画效果相关参数。 |
+| event | () => void | 是 | 指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
 
 ## AnimateParam对象说明
 
@@ -25,7 +27,6 @@
 | onFinish   | ()&nbsp;=&gt;&nbsp;void   | 动效播放完成回调。 |
 
 
-
 ## 示例
 
 ```ts
@@ -33,26 +34,24 @@
 @Entry
 @Component
 struct AnimateToExample {
-  @State widthSize: number = 200
+  @State widthSize: number = 250
   @State heightSize: number = 100
+  @State rotateAngle: number = 0
   private flag: boolean = true
 
   build() {
     Column() {
-      Button('click me')
+      Button('change width and height')
         .width(this.widthSize)
         .height(this.heightSize)
-        .backgroundColor(0x317aff)
-        .onClick((event: ClickEvent) => {
-          // 对Button组件的宽高属性进行动画配置
+        .margin(30)
+        .onClick(() => {
           if (this.flag) {
             animateTo({
-              duration: 1000, // 动画时长
-              tempo: 0.5, // 播放速率
-              curve: Curve.EaseInOut, // 动画曲线
-              delay: 200, // 动画延迟
-              iterations: 1, // 播放次数
-              playMode: PlayMode.Normal, // 动画模式
+              duration: 2000,
+              curve: Curve.EaseOut,
+              iterations: 3,
+              playMode: PlayMode.Normal,
               onFinish: () => {
                 console.info('play end')
               }
@@ -61,25 +60,31 @@ struct AnimateToExample {
               this.heightSize = 50
             })
           } else {
-            animateTo({
-              duration: 200, // 动画时长
-              curve: Curve.Ease, // 动画曲线
-              delay: 200, // 动画延迟
-              iterations: 1, // 播放次数
-              playMode: PlayMode.Normal, // 动画模式
-              onFinish: () => {
-                console.info('play end')
-              }
-            }, () => {
-              this.widthSize = 200
+            animateTo({}, () => {
+              this.widthSize = 250
               this.heightSize = 100
             })
           }
           this.flag = !this.flag
         })
+      Button('change rotate angle')
+        .margin(50)
+        .rotate({ angle: this.rotateAngle })
+        .onClick(() => {
+          animateTo({
+            duration: 1200,
+            curve: Curve.Friction,
+            delay: 500,
+            iterations: -1, // 设置-1表示动画无限循环
+            playMode: PlayMode.AlternateReverse,
+            onFinish: () => {
+              console.info('play end')
+            }
+          }, () => {
+            this.rotateAngle = 90
+          })
+        })
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
-
-![zh-cn_image_0000001174104398](figures/zh-cn_image_0000001174104398.gif)
-- 
GitLab