add and update docs (10174)

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

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

-# Animator
+# @ohos.animator
+
+The **animator** module provides APIs for applying animation effects, including defining animations, starting animations, and playing animations in reverse order.
 
 > **NOTE**
 >
@@ -7,98 +9,90 @@
 
 ## Modules to Import
 
-```
+```js
 import animator from '@ohos.animator';
 ```
+## create<sup>9+</sup>
 
-
-## createAnimator
-
-createAnimator(options: AnimatorOptions): AnimatorResult
+create(options: AnimatorOptions): AnimatorResult
 
 Creates an **Animator** object.
 
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Parameters**
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| options | [AnimatorOptions](#animatoroptions) | Yes| Animator options.|
+
+| Name    | Type                                 | Mandatory  | Description     |
+| ------- | ----------------------------------- | ---- | ------- |
+| options | [AnimatorOptions](#animatoroptions) | Yes   | Animator options.|
 
 **Return value**
-| Type| Description|
-| -------- | -------- |
+
+| 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();
-    }
-  }
+  ```js
+  let options = {
+    duration: 1500,
+    easing: 'friction',
+    delay: 0,
+    fill: 'forwards',
+    direction: "normal",
+    iterations: 3,
+    begin: 200.0,
+    end: 400.0,
+  };
+  animator.create(options);
   ```
 
 ## AnimatorResult
 
 Defines the animator result.
 
-### update
+### reset<sup>9+</sup>
 
-update(options: AnimatorOptions): void
+reset(options: AnimatorOptions): void
 
 Updates this animator.
 
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Parameters**
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| options | [AnimatorOptions](#animatoroptions) | Yes| Animator options.|
+
+| Name    | Type                                 | Mandatory  | Description     |
+| ------- | ----------------------------------- | ---- | ------- |
+| options | [AnimatorOptions](#animatoroptions) | Yes   | Animator options.|
+
+**Error codes**
+
+For details about the error codes, see [Animator Error Codes](../errorcodes/errorcode-animator.md).
+
+| ID  | Error Message|
+| --------- | ------- |
+| 100001    | If no page is found for pageId or fail to get object property list. |
+
 
 **Example**
-```
-animator.update(options);
+
+```js
+let options = {
+  duration: 1500,
+  easing: 'friction',
+  delay: 0,
+  fill: 'forwards',
+  direction: "normal",
+  iterations: 3,
+  begin: 200.0,
+  end: 400.0,
+};
+try {
+  animator.reset(options);
+} catch(error) {
+  console.error(`Animator reset failed, error code: ${error.code}, message: ${error.message}.`);
+}
 ```
 
 ### play
@@ -110,7 +104,8 @@ Plays this animation.
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Example**
-```
+
+```js
 animator.play();
 ```
 
@@ -123,7 +118,8 @@ Ends this animation.
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Example**
-```
+
+```js
 animator.finish();
 ```
 
@@ -136,7 +132,8 @@ Pauses this animation.
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Example**
-```
+
+```js
 animator.pause();
 ```
 
@@ -149,7 +146,8 @@ Cancels this animation.
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Example**
-```
+
+```js
 animator.cancel();
 ```
 
@@ -162,7 +160,8 @@ Plays this animation in reverse order.
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Example**
-```
+
+```js
 animator.reverse();
 ```
 
@@ -175,13 +174,18 @@ 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.|
+
+| Name     | Type    | Mandatory  | Description      |
+| -------- | ------ | ---- | -------- |
+| progress | number | Yes   | Current progress of the animation.|
 
 **Example**
-```
-animator.onframe();
+
+```js
+let animatorResult = animator.create(options)
+animatorResult.onframe = function(value) {
+  console.info("onframe callback")
+}
 ```
 
 ### onfinish
@@ -193,8 +197,12 @@ Called when this animation is finished.
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Example**
-```
-animator.onfinish();
+
+```js
+let animatorResult = animator.create(options)
+animatorResult.onfinish = function() {
+  console.info("onfinish callback")
+}
 ```
 
 ### oncancel
@@ -206,8 +214,12 @@ Called when this animation is canceled.
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Example**
-```
-animator.oncancel();
+
+```js
+let animatorResult = animator.create(options)
+animatorResult.oncancel = function() {
+  console.info("oncancel callback")
+}
 ```
 
 ### onrepeat
@@ -219,9 +231,15 @@ Called when this animation repeats.
 **System capability**: SystemCapability.ArkUI.ArkUI.Full
 
 **Example**
+
+```js
+let animatorResult = animator.create(options)
+animatorResult.onrepeat = function() {
+  console.info("onrepeat callback")
+}
 ```
-animator.onrepeat();
-```
+
+
 
 ## AnimatorOptions
 
@@ -229,13 +247,279 @@ 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.|
+| 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. The default value is 0.                            |
+| end        | number                                   | Yes   | End point of animation interpolation. The default value is 1.                            |
+
+
+## Example
+### JavaScript-compatible Web-like Development Paradigm
+
+```html
+<!-- 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() {
+    let options = {
+      duration: 1500,
+      easing: 'friction',
+      delay: 0,
+      fill: 'forwards',
+      direction: "normal",
+      iterations: 2,
+      begin: 200.0,
+      end: 400.0
+    };
+    this.animator = animator.create(options);
+  },
+  Show() {
+    let options1 = {
+      duration: 1500,
+      easing: 'friction',
+      delay: 0,
+      fill: 'forwards',
+      direction: "normal",
+      iterations: 2,
+      begin: 0,
+      end: 400.0,
+    };
+    try {
+      this.animator.reset(options1);
+    } catch(error) {
+      console.error(`Animator reset failed, error code: ${error.code}, message: ${error.message}.`);
+    }
+    let _this = this;
+    this.animator.onframe = function(value) {
+      _this.divWidth = value;
+      _this.divHeight = value;
+    };
+    this.animator.play();
+  }
+}
+```
+
+  ![en-us_image_00007](figures/en-us_image_00007.gif)
+
+### ArkTS-based Declarative Development Paradigm
+
+```ts
+import animator from '@ohos.animator';
+
+@Entry
+@Component
+struct AnimatorTest {
+  private TAG: string = '[AnimatorTest]'
+  private backAnimator: any = undefined
+  private flag: boolean = false
+  @State wid: number = 100
+  @State hei: number = 100
+
+  create() {
+    let _this = this
+    this.backAnimator = animator.create({
+      duration: 2000,
+      easing: 'ease',
+      delay: 0,
+      fill: 'none',
+      direction: 'normal',
+      iterations: 1,
+      begin: 100,
+      end: 200
+    })
+    this.backAnimator.onfinish = function () {
+      _this.flag = true
+      console.info(_this.TAG, 'backAnimator onfinish')
+    }
+    this.backAnimator.onrepeat = function () {
+      console.info(_this.TAG, 'backAnimator repeat')
+    }
+    this.backAnimator.oncancel = function () {
+      console.info(_this.TAG, 'backAnimator cancel')
+    }
+    this.backAnimator.onframe = function (value) {
+      _this.wid = value
+      _this.hei = value
+    }
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Column()
+          .width(this.wid)
+          .height(this.hei)
+          .backgroundColor(Color.Red)
+      }
+      .width('100%')
+      .height(300)
+
+      Column() {
+        Row() {
+          Button('create')
+            .fontSize(30)
+            .fontColor(Color.Black)
+            .onClick(() => {
+              this.create()
+            })
+        }
+        .padding(10)
+
+        Row() {
+          Button('play')
+            .fontSize(30)
+            .fontColor(Color.Black)
+            .onClick(() => {
+              this.flag = false
+              this.backAnimator.play()
+            })
+        }
+        .padding(10)
+
+        Row() {
+          Button('pause')
+            .fontSize(30)
+            .fontColor(Color.Black)
+            .onClick(() => {
+              this.backAnimator.pause()
+            })
+        }
+        .padding(10)
+
+        Row() {
+          Button('finish')
+            .fontSize(30)
+            .fontColor(Color.Black)
+            .onClick(() => {
+              this.flag = true
+              this.backAnimator.finish()
+            })
+        }
+        .padding(10)
+
+        Row() {
+          Button('reverse')
+            .fontSize(30)
+            .fontColor(Color.Black)
+            .onClick(() => {
+              this.flag = false
+              this.backAnimator.reverse()
+            })
+        }
+        .padding(10)
+
+        Row() {
+          Button('cancel')
+            .fontSize(30)
+            .fontColor(Color.Black)
+            .onClick(() => {
+              this.backAnimator.cancel()
+            })
+        }
+        .padding(10)
+
+        Row() {
+          Button('reset')
+            .fontSize(30)
+            .fontColor(Color.Black)
+            .onClick(() => {
+              if (this.flag) {
+                this.flag = false
+                this.backAnimator.reset({
+                  duration: 5000,
+                  easing: 'ease-in',
+                  delay: 0,
+                  fill: 'none',
+                  direction: 'normal',
+                  iterations: 4,
+                  begin: 100,
+                  end: 300
+                })
+              } else {
+                console.info(this.TAG, 'Animation not ended')
+              }
+            })
+        }
+        .padding(10)
+      }
+    }
+  }
+}
+```
+
+## update<sup>(deprecated)</sup>
+
+update(options: AnimatorOptions): void
+
+Updates this animator.
+
+This API is deprecated since API version 9. You are advised to use [reset<sup>9+</sup>](#reset9) instead.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name    | Type                                 | Mandatory  | Description     |
+| ------- | ----------------------------------- | ---- | ------- |
+| options | [AnimatorOptions](#animatoroptions) | Yes   | Animator options.|
+
+**Example**
+
+```js
+animator.update(options);
+```
+
+## createAnimator<sup>(deprecated)</sup>
+
+createAnimator(options: AnimatorOptions): AnimatorResult
+
+Creates an **Animator** object.
+
+This API is deprecated since API version 9. You are advised to use [create<sup>9+</sup>](#create9) instead.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name    | Type                                 | Mandatory  | Description     |
+| ------- | ----------------------------------- | ---- | ------- |
+| options | [AnimatorOptions](#animatoroptions) | Yes   | Animator options.|
+
+**Return value**
+
+| Type                               | Description           |
+| --------------------------------- | ------------- |
+| [AnimatorResult](#animatorresult) | Animator result.|
+
+**Example**
+
+```js
+let options = {
+  duration: 1500,
+  easing: 'friction',
+  delay: 0,
+  fill: 'forwards',
+  direction: "normal",
+  iterations: 3,
+  begin: 200.0,
+  end: 400.0,
+};
+this.animator = animator.createAnimator(options);
+```

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

+# Interpolation Calculation
+
+The **Curves** module provides APIs for interpolation calculation to construct step, cubic Bezier, and spring curve objects.
+
+> **NOTE**
+> 
+> The initial APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Modules to Import
+
+```ts
+import Curves from '@ohos.curves'
+```
+
+
+## Curves.initCurve<sup>9+</sup>
+
+initCurve(curve?: Curve): ICurve
+
+
+Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type                                                        | Mandatory| Default Value      | Description      |
+| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- |
+| curve  | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | No  | Curve.Linear | Curve type.|
+
+**Return value**
+
+| Type                          | Description            |
+| ---------------------------------- | ---------------- |
+|  [ICurve](#icurve) | Curve object.|
+
+
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+Curves.initCurve(Curve.EaseIn) // Create a default ease-in curve, where the interpolation starts slowly and then picks up speed.
+```
+
+
+##  Curves.stepsCurve<sup>9+</sup>
+
+stepsCurve(count: number, end: boolean): ICurve
+
+
+Constructs a step curve object.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type   | Mandatory| Description                                                        |
+| ------ | ------- | ----| ------------------------------------------------------------ |
+| count  | number  | Yes  | Number of steps. The value must be a positive integer.                                  |
+| end    | boolean | Yes  | Whether jumping occurs when the interpolation ends.<br>- **true**: Jumping occurs when the interpolation ends.<br>- **false**: Jumping occurs when the interpolation starts.|
+
+**Return value**
+
+| Type                          | Description            |
+| ---------------------------------- | ---------------- |
+|  [ICurve](#icurve) | Curve object.|
+
+
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+Curves.stepsCurve(9, true) // Create a step curve.
+```
+
+
+## Curves.cubicBezierCurve<sup>9+</sup>
+
+cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve
+
+
+Constructs a cubic Bezier curve object. The curve values must be between 0 and 1.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+| Name | Type    | Mandatory  | Description            |
+| ---- | ------ | ---- | -------------- |
+| x1   | number | Yes   | X coordinate of the first point on the Bezier curve.|
+| y1   | number | Yes   | Y coordinate of the first point on the Bezier curve.|
+| x2   | number | Yes   | X coordinate of the second point on the Bezier curve.|
+| y2   | number | Yes   | Y coordinate of the second point on the Bezier curve.|
+
+**Return value**
+
+| Type                          | Description            |
+| ---------------------------------- | ---------------- |
+|  [ICurve](#icurve) | Curve object.|
+
+
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // Create a cubic Bezier curve.
+```
+
+
+##  Curves.springCurve<sup>9+</sup>
+
+springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve
+
+
+Constructs a spring curve object.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+| Name      | Type    | Mandatory  | Description   |
+| --------- | ------ | ---- | ----- |
+| velocity  | number | Yes   | Initial velocity. It is applied by external factors to the elastic animation. It aims to help ensure the smooth transition from the previous motion state to the elastic animation.|
+| mass      | number | Yes   | Mass. Force object of the elastic system, which will have inertia effect on the elastic system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
+| stiffness | number | Yes   | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
+| damping   | number | Yes   | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
+
+
+**Return value**
+
+| Type                          | Description            |
+| ---------------------------------- | ---------------- |
+|  [ICurve](#icurve)| Curve object.|
+
+
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+Curves.springCurve(100, 1, 228, 30) // Create a spring curve.
+```
+
+
+## ICurve
+
+
+### interpolate
+
+interpolate(fraction: number): number
+
+
+Implements calculation.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name  | Type  | Mandatory| Description                                        |
+| -------- | ------ | ---- | -------------------------------------------- |
+| fraction | number | Yes  | Current normalized time. The value ranges from 0 to 1.|
+
+**Return value**
+
+| Type  | Description                                |
+| ------ | ------------------------------------ |
+| number | Curve interpolation corresponding to the normalized time point.|
+
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+let curve = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve.
+let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.
+```
+
+
+## Curves.init<sup>(deprecated)</sup>
+
+init(curve?: Curve): string
+
+
+Implements initialization to create a curve. This API is deprecated since API version 9. You are advised to use [Curves.initCurve](#curvesinitcurve9) instead.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type                                                        | Mandatory| Default Value      | Description      |
+| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- |
+| curve  |[Curve](../arkui-ts/ts-appendix-enums.md#curve) | No  | Curve.Linear | Curve type.|
+
+
+## Curves.steps<sup>(deprecated)</sup>
+
+steps(count: number, end: boolean): string
+
+
+Constructs a step curve object. This API is deprecated since API version 9. You are advised to use [Curves.stepsCurve](#curvesstepscurve9) instead.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type   | Mandatory| Description                                                        |
+| ------ | ------- | ----| ------------------------------------------------------------ |
+| count  | number  | Yes  | Number of steps. The value must be a positive integer.                                  |
+| end    | boolean | Yes  | Whether jumping occurs when the interpolation ends.<br>- **true**: Jumping occurs when the interpolation ends.<br>- **false**: Jumping occurs when the interpolation starts.|
+
+
+## Curves.cubicBezier<sup>(deprecated)</sup>
+
+cubicBezier(x1: number, y1: number, x2: number, y2: number): string
+
+
+Constructs a cubic Bezier curve object. The curve value must range from 0 to 1. This API is deprecated since API version 9. You are advised to use [Curves.cubicBezierCurve](#curvescubicbeziercurve9) instead.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+| Name | Type    | Mandatory  | Description            |
+| ---- | ------ | ---- | -------------- |
+| x1   | number | Yes   | X coordinate of the first point on the Bezier curve.|
+| y1   | number | Yes   | Y coordinate of the first point on the Bezier curve.|
+| x2   | number | Yes   | X coordinate of the second point on the Bezier curve.|
+| y2   | number | Yes   | Y coordinate of the second point on the Bezier curve.|
+
+
+## Curves.spring<sup>(deprecated)</sup>
+
+spring(velocity: number, mass: number, stiffness: number, damping: number): string
+
+
+Constructs a spring curve object. This API is deprecated since API version 9. You are advised to use [Curves.springCurve](#curvesspringcurve9) instead.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name      | Type    | Mandatory  | Description   |
+| --------- | ------ | ---- | ----- |
+| velocity  | number | Yes   | Initial velocity. It is applied by external factors to the elastic animation. It aims to help ensure the smooth transition from the previous motion state to the elastic animation.|
+| mass      | number | Yes   | Mass. Force object of the elastic system, which will have inertia effect on the elastic system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
+| stiffness | number | Yes   | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
+| damping   | number | Yes   | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
+
+## Example
+
+```ts
+// xxx.ets
+import Curves from '@ohos.curves'
+@Entry
+@Component
+struct ImageComponent {
+  @State widthSize: number = 200
+  @State heightSize: number = 200
+
+  build() {
+    Column() {
+      Text()
+        .margin({top:100})
+        .width(this.widthSize)
+        .height(this.heightSize)
+        .backgroundColor(Color.Red)
+        .onClick(()=> {
+          let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0);
+          this.widthSize = curve.interpolate(0.5) * this.widthSize;
+          this.heightSize = curve.interpolate(0.5) * this.heightSize;
+        })
+        .animation({duration: 2000 , curve: Curves.stepsCurve(9, true)})
+    }.width("100%").height("100%")
+  }
+}
+```
+
+![en-us_image_0000001174104410](figures/en-us_image_0000001174104410.gif)

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

+# @ohos.matrix4
+
+The **matrix4** module provides APIs for matrix transformation. You can use these APIs to translate, rotate, and scale images.
+
+> **NOTE**
+>
+> The initial APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Modules to Import
+
+```ts
+import matrix4 from '@ohos.matrix4'
+```
+
+
+## matrix4.init
+
+init(array: Array<number>): Matrix4Transit
+
+
+Matrix constructor, which is used to create a 4x4 matrix by using the input parameter. Column-major order is used.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type               | Mandatory| Description                                                        |
+| ------ | ------------------- | ---- | ------------------------------------------------------------ |
+| array  | Array&lt;number&gt; | Yes  | A number array whose length is 16 (4 x 4). For details, see **array** parameters.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
+
+**Return value**
+
+| Type          | Description                        |
+| -------------- | ---------------------------- |
+| Matrix4Transit | 4x4 matrix object created based on the input parameter.|
+
+**array** parameters
+
+| Name | Type    | Mandatory  | Description                  |
+| ---- | ------ | ---- | -------------------- |
+| m00  | number | Yes   | Scaling value of the x-axis. The default value is **1** for the identity matrix.     |
+| m01  | number | Yes   | The second value, which is affected by the rotation of the x, y, and z axes.  |
+| m02  | number | Yes   | The third value, which is affected by the rotation of the x, y, and z axes.  |
+| m03  | number | Yes   | The fourth value, which is meaningless.              |
+| m10  | number | Yes   | The fifth value, which is affected by the rotation of the x, y, and z axes.  |
+| m11  | number | Yes   | Scaling value of the y-axis. The default value is **1** for the identity matrix.     |
+| m12  | number | Yes   | The seventh value, which is affected by the rotation of the x, y, and z axes.  |
+| m13  | number | Yes   | The eighth value, which is meaningless.              |
+| m20  | number | Yes   | The ninth value, which is affected by the rotation of the x, y, and z axes.  |
+| m21  | number | Yes   | The tenth value, which is affected by the rotation of the x, y, and z axes. |
+| m22  | number | Yes   | Scaling value of the z-axis. The default value is **1** for the identity matrix.     |
+| m23  | number | Yes   | Meaningless value.              |
+| m30  | number | Yes   | Translation value of the x-axis, in px. The default value is **0** for the identity matrix.|
+| m31  | number | Yes   | Translation value of the y-axis, in px. The default value is **0** for the identity matrix.|
+| m32  | number | Yes   | Translation value of the z-axis, in px. The default value is **0** for the identity matrix.|
+| m33  | number | Yes   | Valid in homogeneous coordinates, presenting the perspective projection effect.   |
+
+**Example**
+
+```ts
+import matrix4 from '@ohos.matrix4'
+// Create a 4 x 4 matrix.
+let matrix = matrix4.init([1.0, 0.0, 0.0, 0.0,
+                          0.0, 1.0, 0.0, 0.0,
+                          0.0, 0.0, 1.0, 0.0,
+                          0.0, 0.0, 0.0, 1.0])
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .transform(matrix)
+    }
+  }
+}
+```
+
+
+## matrix4.identity
+
+identity(): Matrix4Transit
+
+
+Constructs an identity matrix.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Return value**
+
+| Type          | Description          |
+| -------------- | -------------- |
+| Matrix4Transit | Identity matrix object.|
+
+**Example**
+
+```ts
+// The effect of matrix 1 is the same as that of matrix 2.
+import matrix4 from '@ohos.matrix4'
+let matrix1 = matrix4.init([1.0, 0.0, 0.0, 0.0,
+                          0.0, 1.0, 0.0, 0.0,
+                          0.0, 0.0, 1.0, 0.0,
+                          0.0, 0.0, 0.0, 1.0])
+let matrix2 = matrix4.identity()
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .transform(matrix1)
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .margin({ top: 150 })
+        .transform(matrix2)
+    }
+  }
+}
+```
+
+
+## matrix4.copy
+
+copy(): Matrix4Transit
+
+
+Copies this matrix object.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Return value**
+
+| Type          | Description                |
+| -------------- | -------------------- |
+| Matrix4Transit | Copy object of the current matrix.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().translate({x:100})
+  private matrix2 = this.matrix1.copy().scale({x:2})
+
+  build() {
+    Column() {
+      Image($r("app.media.bg1"))
+        .width("40%")
+        .height(100)
+        .transform(this.matrix1)
+      Image($r("app.media.bg2"))
+        .width("40%")
+        .height(100)
+        .margin({top:50})
+        .transform(this.matrix2)
+    }
+  }
+}
+```
+
+![en-us_image_0000001219744181](figures/en-us_image_0000001219744181.png)
+
+
+## Matrix4
+
+
+### combine
+
+combine(matrix: Matrix4): Matrix4Transit
+
+
+Combines the effects of two matrices to generate a new matrix object.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type   | Mandatory| Description              |
+| ------ | ------- | ---- | ------------------ |
+| matrix | Matrix4 | Yes  | Matrix object to be combined.|
+
+**Return value**
+
+| Type          | Description              |
+| -------------- | ------------------ |
+| Matrix4Transit | Object after matrix combination.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().translate({x:200}).copy()
+  private matrix2 = matrix4.identity().scale({x:2}).copy()
+
+  build() {
+    Column() {
+      // Before matrix transformation
+      Image($r("app.media.icon"))
+        .width("40%")
+        .height(100)
+        .margin({top:50})
+      // Translate the x-axis by 200px, and then scale it twice to obtain the resultant matrix.
+      Image($r("app.media.icon"))
+        .transform(this.matrix1.combine(this.matrix2))
+        .width("40%")
+      .height(100)
+        .margin({top:50})
+    }
+  }
+}
+```
+
+![en-us_image_0000001118642902](figures/en-us_image_0000001118642902.png)
+
+
+### invert
+
+invert(): Matrix4Transit
+
+Inverts this matrix object.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Return value**
+
+| Type          | Description                  |
+| -------------- | ---------------------- |
+| Matrix4Transit | Inverse matrix object of the current matrix.|
+
+**Example**
+
+```ts
+import matrix4 from '@ohos.matrix4'
+// The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
+let matrix1 = matrix4.identity().scale({x:2})
+let matrix2 = matrix1.invert()
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width(200)
+        .height(100)
+        .transform(matrix1)
+        .margin({ top: 100 })
+      Image($r("app.media.zh"))
+        .width(200)
+        .height(100)
+        .margin({ top: 150 })
+        .transform(matrix2)
+    }
+  }
+}
+```
+
+
+### translate
+
+translate({x?: number, y?: number, z?: number}): Matrix4Transit
+
+Translates this matrix object along the x, y, and z axes.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type  | Mandatory| Description                                 |
+| ------ | ------ | ---- | ------------------------------------- |
+| x      | number | No  | Translation distance along the x-axis, in px.<br>Default value: **0**|
+| y      | number | No  | Translation distance along the y-axis, in px.<br>Default value: **0**|
+| z      | number | No  | Translation distance along the z-axis, in px.<br>Default value: **0**|
+
+**Return value**
+
+| Type          | Description                        |
+| -------------- | ---------------------------- |
+| Matrix4Transit | Matrix object after the translation effect is added.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().translate({x:100, y:200, z:30})
+
+  build() {
+    Column() {
+      Image($r("app.media.bg1")).transform(this.matrix1)
+        .width("40%")
+        .height(100)
+    }
+  }
+}
+```
+
+![en-us_image_0000001219662645](figures/en-us_image_0000001219662645.png)
+
+
+### scale
+
+scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Matrix4Transit
+
+
+Scales this matrix object along the x, y, and z axes.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name | Type  | Mandatory| Description                             |
+| ------- | ------ | ---- | --------------------------------- |
+| x       | number | No  | Scaling multiple along the x-axis.<br>Default value: **1**    |
+| y       | number | No  | Scaling multiple along the y-axis.<br>Default value: **1**    |
+| z       | number | No  | Scaling multiple along the z-axis.<br>Default value: **1**    |
+| centerX | number | No  | X coordinate of the center point.<br>Default value: **0**|
+| centerY | number | No  | Y coordinate of the center point.<br>Default value: **0**|
+
+**Return value**
+
+| Type          | Description                        |
+| -------------- | ---------------------------- |
+| Matrix4Transit | Matrix object after the scaling effect is added.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
+
+  build() {
+    Column() { 
+      Image($r("app.media.bg1")).transform(this.matrix1)
+        .width("40%")
+        .height(100)
+    }
+  }
+}
+```
+
+![en-us_image_0000001219864131](figures/en-us_image_0000001219864131.png)
+
+
+### rotate
+
+rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Matrix4Transit
+
+
+Rotates this matrix object along the x, y, and z axes.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name | Type  | Mandatory| Description                             |
+| ------- | ------ | ---- | --------------------------------- |
+| x       | number | No  | X coordinate of the rotation axis vector.<br>Default value: **1**  |
+| y       | number | No  | Y coordinate of the rotation axis vector.<br>Default value: **1**  |
+| z       | number | No  | Z coordinate of the rotation axis vector.<br>Default value: **1**  |
+| angle   | number | No  | Rotation angle.<br>Default value: **0**         |
+| centerX | number | No  | X coordinate of the center point.<br>Default value: **0**|
+| centerY | number | No  | Y coordinate of the center point.<br>Default value: **0**|
+
+**Return value**
+
+| Type          | Description                        |
+| -------------- | ---------------------------- |
+| Matrix4Transit | Matrix object after the rotation effect is added.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
+
+  build() {
+    Column() {
+      Image($r("app.media.bg1")).transform(this.matrix1)
+        .width("40%")
+        .height(100)
+    }.width("100%").margin({top:50})
+  }
+}
+```
+
+![en-us_image_0000001174422898](figures/en-us_image_0000001174422898.png)
+
+
+### transformPoint
+
+transformPoint(point: Point): Point
+
+
+Applies the current transformation effect to a coordinate point.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type | Mandatory| Description              |
+| ------ | ----- | ---- | ------------------ |
+| point  | Point | Yes  | Point to be transformed.|
+
+**Return value**
+
+| Type   | Description              |
+| ----- | ---------------- |
+| Point | Point object after matrix transformation|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+
+@Entry
+@Component
+struct Test {
+  private originPoint: [number, number] = [50, 50]
+  private matrix_1 = matrix4.identity().translate({ x: 150, y: -50 })
+  private transformPoint = this.matrix_1.transformPoint(this.originPoint)
+  private matrix_2 = matrix4.identity().translate({ x: this.transformPoint[0], y: this.transformPoint[1] })
+
+  build() {
+    Column() {
+      Text(`Coordinates before matrix transformation: [${this.originPoint}]`)
+        .fontSize(16)
+      Image($r("app.media.image"))
+        .width('600px')
+        .height('300px')
+        .margin({ top: 50 })
+      Text(`Coordinates before matrix transformation: [${this.transformPoint}]`)
+        .fontSize(16)
+        .margin({ top: 100 })
+      Image($r("app.media.image"))
+        .width('600px')
+        .height('300px')
+        .margin({ top: 50 })
+        .transform(this.matrix_2)
+    }.width("100%").padding(50)
+  }
+}
+```
+
+![en-us_image_0000001219864133](figures/en-us_image_0000001219864133.PNG)

en/application-dev/reference/errorcodes/errorcode-animator.md

+# Animator Error Codes
+
+## 100001 Internal Error
+
+**Error Message**
+
+Internal error.
+
+**Description**
+
+This error code is reported when an internal error that cannot be rectified by developers occurs. The internal error type is included in the error information.
+
+**Possible Causes**
+
+The operation for obtaining the rendering engine or parsing parameters fails.
+
+**Solution**
+
+N/A