update docs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/apis/js-apis-animator.md

-# Animation
+# Animator
+
+> **NOTE**<br>
+> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
 ## Modules to Import
 
-**requestAnimationFrame**: none
+```
+import animator from '@ohos.animator';
+```
+
+
+## createAnimator
+
+createAnimator(options: AnimatorOptions): AnimatorResult
+
+Creates an **Animator** object.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| options | [AnimatorOptions](#animatoroptions) | Yes| Animator options. For details, see **AnimatorOptions**.|
+
+**Return value**
+| Type| Description|
+| -------- | -------- |
+| [AnimatorResult](#animatorresult) | Animator result.|
+
+**Example**
+
+  ```
+  <!-- hml -->
+  <div class="container">
+    <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show">
+    </div>
+  </div>
+  ```
+
+  ```
+  // js
+  export default {
+    data : {
+      divWidth: 200,
+      divHeight: 200,
+      animator: null
+    },
+    onInit() {
+      var options = {
+        duration: 1500,
+        easing: 'friction',
+        fill: 'forwards',
+        iterations: 2,
+        begin: 200.0,
+        end: 400.0
+      };
+      this.animator = animator.createAnimator(options);
+    },
+    Show() {
+      var options1 = {
+        duration: 2000,
+        easing: 'friction',
+        fill: 'forwards',
+        iterations: 1,
+        begin: 200.0,
+        end: 400.0
+      };
+      this.animator.update(options1);
+      var _this = this;
+      this.animator.onframe = function(value) {
+        _this.divWidth = value;
+        _this.divHeight = value;
+      };
+      this.animator.play();
+    }
+  }
+  ```
+
+## AnimatorResult
+
+Defines the animator result.
+
+### update
+
+update(options: AnimatorOptions): void
+
+Updates this animator.
 
-**cancelAnimationFrame**: none
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
 
-**createAnimator**:
+**Parameters**
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| options | [AnimatorOptions](#animatoroptions) | Yes| Animator options.|
 
+**Example**
 ```
-import animator from '@ohos.animator';
+animator.update(options);
 ```
 
-## Required Permissions
+### play
 
-None
+play(): void
 
-## requestAnimationFrame
+Plays this animation.
 
-requestAnimationFrame\(handler\[, \[ ...args\]\]\): number
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
 
-Requests an animation frame.
+**Example**
+```
+animator.play();
+```
 
-- Parameters
+### finish
 
-  | Name    | Type        | Mandatory | Description                                                  |
-  | ------- | ----------- | --------- | ------------------------------------------------------------ |
-  | handler | Function    | Yes       | Handler used to request a frame. When **requestAnimationFrame** calls the **handler**, the timestamp is passed to the first parameter to indicate the time when **requestAnimationFrame** starts to execute the callback. |
-  | ...args | Array\<any> | No        | Additional parameter, which is passed to the **handler** as a parameter during function callback. |
+finish(): void
 
--   Return values
+Ends this animation.
 
-    | Type   | Description |
-    | ------ | ----------- |
-    | number | Request ID. |
-    
--   Example
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
 
-    ```
-    <!-- xxx.hml -->
-    <div class="container">
-      <button type="capsule" class="btn" onclick="beginAnimation">beginAnimation</button>
-    </div>
-    ```
-
-    ```
-    /* xxx.css */
-    .container {
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-    }
-    .btn{
-      width: 300px;
-      margin-top: 40px;
-    }
-    ```
-
-    ```
-    /* xxx.js */
-    export default {
-      data: {
-        requestId: 0,
-        startTime: 0,
-      },
-      beginAnimation() {
-        cancelAnimationFrame(this.requestId);
-        this.requestId = requestAnimationFrame(this.runAnimation);
-      },
-      runAnimation(timestamp) {
-        if (this.startTime == 0) {
-          this.startTime = timestamp;
-        }
-        var elapsed = timestamp - this.startTime;
-        if (elapsed < 500) {
-          console.log('callback handler timestamp: ' + timestamp);
-          this.requestId = requestAnimationFrame(this.runAnimation);
-        }
-      }
-    }
-    ```
+**Example**
+```
+animator.finish();
+```
 
+### pause
 
-## cancelAnimationFrame
+pause(): void
 
-cancelAnimationFrame\(requestId: number\): void
+Pauses this animation.
 
-Cancels the animation frame request.
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
 
--   Parameters
+**Example**
+```
+animator.pause();
+```
 
-   | Name      | Type   | Mandatory | Description              |
-| --------- | ------ | --------- | ------------------------ |
-   | requestId | number | Yes       | ID of the frame request. |
-   
--   Example
+### cancel
 
-    ```
-    <!-- xxx.hml -->
-    <div class="container">
-      <button type="capsule" class="btn" onclick="beginAnimation">beginAnimation</button>
-      <button type="capsule" class="btn" onclick="beginAnimation">stopAnimation</button>
-    </div>
-    ```
-
-    ```
-    /* xxx.css */
-    .container {
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-    }
-    .btn{
-      width: 300px;
-      margin-top: 40px;
-    }
-    ```
-
-    ```
-    /* xxx.js */
-    export default {
-      data: {
-        requestId: 0,
-        startTime: 0,
-      },
-      beginAnimation() {
-        cancelAnimationFrame(this.requestId);
-        this.requestId = requestAnimationFrame(this.runAnimation);
-      },
-      runAnimation(timestamp) {
-        if (this.startTime == 0) {
-          this.startTime = timestamp;
-        }
-        var elapsed = timestamp - this.startTime;
-        if (elapsed < 500) {
-          console.log('callback handler timestamp: ' + timestamp);
-          this.requestId = requestAnimationFrame(this.runAnimation);
-        }
-      },
-      stopAnimation() {
-        cancelAnimationFrame(this.requestId);
-      }
-    }
-    ```
+cancel(): void
 
+Cancels this animation.
 
-## createAnimator
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
 
-createAnimator\(options\[...\]\): void
-
-Creates an animation object.
-
-- Parameters
-
-  | Name    | Type   | Mandatory | Description                                                  |
-  | ------- | ------ | --------- | ------------------------------------------------------------ |
-  | options | Object | Yes       | Attributes of the **Animator** to be created. For details, see the options table. |
-
-- Description of options
-
-  | Name       | Type   | Mandatory | Description                                                  |
-  | ---------- | ------ | --------- | ------------------------------------------------------------ |
-  | duration   | number | No        | Duration for playing an animation, in milliseconds. The default value is **0**. |
-  | easing     | string | No        | Animation easing curve. The default value is **ease**.       |
-  | delay      | number | No        | Animation delay duration, in milliseconds. The default value is **0**, indicating that there is no delay. |
-  | fill       | string | No        | Animation start/stop mode. The default value is **none**.    |
-  | direction  | string | No        | Animation playback mode. The default value is **normal**.    |
-  | iterations | number | No        | Number of times that an animation is played. The default value is **1**. If this parameter is set to **0**, the animation is not played. If this parameter is set to **-1**, the animation is played for an unlimited number of times. |
-  | begin      | number | No        | Start point of the animation easing. If this parameter is not set, the default value **0** is used. |
-  | end        | number | No        | End point of the animation easing. If this parameter is not set, the default value **1** is used. |
-
--   animator interfaces
-
-    | Name    | Type    | Description                                                  |
-    | ------- | ------- | ------------------------------------------------------------ |
-    | update  | options | Updates the animation parameters. The input parameters are the same as those of **createAnimator**. |
-    | play    | -       | Starts an animation.                                         |
-    | finish  | -       | Ends an animation.                                           |
-    | pause   | -       | Pauses an animation.                                         |
-    | cancel  | -       | Cancels an animation.                                        |
-    | reverse | -       | Reverses an animation.                                       |
-
-
--   **animator**  supported events:
-
-    | Name   | Type   | Description                         |
-    | ------ | ------ | ----------------------------------- |
-    | frame  | number | The frame is requested.             |
-    | cancel | -      | The animation is forcibly canceled. |
-    | finish | -      | The animation playback is complete. |
-    | repeat | -      | The animation replays.              |
-    
--   Example
-
-    ```
-    <!-- hml -->
-    <div class="container">
-      <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show">
-      </div>
-    </div>
-    ```
-
-    ```
-    // js
-    export default {
-      data : {
-        divWidth: 200,
-        divHeight: 200,
-        animator: null
-      },
-      onInit() {
-        var options = {
-          duration: 1500,
-          easing: 'friction',
-          fill: 'forwards',
-          iterations: 2,
-          begin: 200.0,
-          end: 400.0
-        };
-        this.animator = animator.createAnimator(options);
-      },
-      Show() {
-        var options1 = {
-          duration: 2000,
-          easing: 'friction',
-          fill: 'forwards',
-          iterations: 1,
-          begin: 200.0,
-          end: 400.0
-        };
-        this.animator.update(options1);
-        var _this = this;
-        this.animator.onframe = function(value) {
-          _this.divWidth = value;
-          _this.divHeight = value;
-        };
-        this.animator.play();
-      }
-    }
-    ```
+**Example**
+```
+animator.cancel();
+```
+
+### reverse
+
+reverse(): void
+
+Plays this animation in reverse order.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Example**
+```
+animator.reverse();
+```
+
+### onframe
+
+onframe: (progress: number) => void
+
+Called when a frame is received.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| progress | number | Yes| Current progress of the animation.|
+
+**Example**
+```
+animator.onframe();
+```
+
+### onfinish
+
+onfinish: () => void
+
+Called when this animation is finished.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Example**
+```
+animator.onfinish();
+```
+
+### oncancel
+
+oncancel: () => void
+
+Called when this animation is canceled.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Example**
+```
+animator.oncancel();
+```
+
+### onrepeat
+
+onrepeat: () => void
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Example**
+```
+animator.onrepeat();
+```
+
+Called when this animation repeats.
+
+## AnimatorOptions
+
+Defines animator options.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| duration | number | Yes| Duration for playing the animation, in milliseconds. The default value is **0**.|
+| easing | string | Yes| Animation interpolation curve. The default value is **ease**.|
+| delay | number | Yes| Animation delay duration, in milliseconds. The default value is **0**, indicating that there is no delay.|
+| fill | "none" \| "forwards" \| "backwards" \| "both" | Yes| State of the animated target after the animation is executed. The default value is **none**, which means that the target will retain its end state (defined by the last keyframe) after the animation is executed. |
+| direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | Yes| Animation playback mode. The default value is **normal**.|
+| iterations | number | Yes| Number of times that the animation is played. The default value is **1**. The value **0** means not to play the animation, and **-1** means to play the animation for an unlimited number of times.|
+| begin | number | Yes| Start point of the animation interpolation. If this parameter is not set, the default value **0** is used.|
+| end | number | Yes| End point of the animation interpolation. If this parameter is not set, the default value **1** is used.|
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md

 # Interpolation Calculation
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
+> **NOTE**<br>
 > This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -31,7 +31,8 @@ Implements initialization for the interpolation curve, which is used to create a
   | -------- | -------- | -------- | -------- | -------- |
   | curve | Curve | No | Linear | Curve object. |
 
-- Return value<br>
+- Return value
+  
   Curve object.
 
 
@@ -47,9 +48,10 @@ Constructs a step curve object.
     | Name | Type | Mandatory | Default Value | Description |
   | -------- | -------- | -------- | -------- | -------- |
   | count | number | Yes | - | Number of steps. Must be a positive integer. |
-  | end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
+  | end | boolean | Yes | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
 
-- Return value<br>
+- Return value
+  
   Curve object.
 
 
@@ -69,7 +71,8 @@ Constructs a third-order Bezier curve object. The curve value must be between 0
   | x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
   | y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
 
-- Return value<br>
+- Return value
+  
   Curve object.
 
 
@@ -89,7 +92,8 @@ Constructs a spring curve object.
   | stiffness | number | Yes | Stiffness. |
   | damping | number | Yes | Damping. |
 
-- Return value<br>
+- Return value
+  
   Curve object.
 
 
@@ -105,7 +109,7 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi
 ```
 
 
-  Curve objects can be created only by the preceding APIs.
+Curve objects can be created only by the preceding APIs.
 | API | Description |
 | -------- | -------- |
 | interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.<br/>**time**: indicates the current normalized time. The value ranges from 0 to 1.<br/>The curve interpolation corresponding to the normalized time point is returned. |