diff --git a/en/application-dev/reference/arkui-ts/figures/animation.PNG b/en/application-dev/reference/arkui-ts/figures/animation.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..92f92e0001a90840d03ebd00e0b0ef736c2a94c8
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animation.PNG differ
diff --git a/en/application-dev/reference/arkui-ts/figures/animation.gif b/en/application-dev/reference/arkui-ts/figures/animation.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6cfbc07fc5122be3ecd69e6b33b6f00c0f676a0f
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animation.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/animation1.PNG b/en/application-dev/reference/arkui-ts/figures/animation1.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..98cc1fa8c0537071549fa8185fa14f7ad103e7f8
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animation1.PNG differ
diff --git a/en/application-dev/reference/arkui-ts/figures/button.gif b/en/application-dev/reference/arkui-ts/figures/button.gif
new file mode 100644
index 0000000000000000000000000000000000000000..04ab6ed97635118a7ffd3fb9d6be666f2ac40691
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/button.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/clipAndMask.PNG b/en/application-dev/reference/arkui-ts/figures/clipAndMask.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..6f522bf5a01241f67ad8c493a04f3d9d71aa9be5
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/clipAndMask.PNG differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898494.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898494.gif
deleted file mode 100644
index 3c81f8cfffb0c4d064335c9ebc0e8c918d10035a..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898494.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218452.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218452.png
deleted file mode 100644
index 2243912034c109d0ffa57837aa28f4fab4ed55d7..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218452.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378394.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378394.png
deleted file mode 100644
index 884eb29ed12c00641fec55f358a41f15f581c335..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378394.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378444.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378444.gif
deleted file mode 100644
index 69cc497191325216c394de0ce00328a7c5c5fc8c..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378444.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978345.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978345.gif
deleted file mode 100644
index 864e3a39a57b7a45f63a07fe50545629db3527c4..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978345.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138341.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138341.gif
deleted file mode 100644
index bb1dd72311c866d5bf31a706d75fc1e107a5a946..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138341.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/flex.PNG b/en/application-dev/reference/arkui-ts/figures/flex.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..9975e8261fd548d2b11607ed3603410dd4a1577e
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/flex.PNG differ
diff --git a/en/application-dev/reference/arkui-ts/figures/shared.gif b/en/application-dev/reference/arkui-ts/figures/shared.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d43a6a38d9516945efc3ed80f4f1592c94645952
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/shared.gif differ
diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
index b390dc8ead870e17ad37c02632295e1f2e414bfc..36d37c6d5fe1e091128d60ee0ff9f337bd13c818 100644
--- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
+++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
@@ -1,23 +1,21 @@
 # Property Animator
 
-You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, backgroundColor, **opacity**, **scale**, **rotate**, and **translate**.
+You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**.
 
 > **NOTE**
 >
 > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
 
-Applies a property animator to the component to animate its attributes over time.
+animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
 
 **Parameters**
 
-
 | Name        | Type                                      | Mandatory   | Description                                                        |
 | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
 | duration   | number                                    | No   | Animation duration, in ms.<br>Default value: **1000**|
 | tempo      | number                                    | No   | Animation playback speed. A greater value indicates a higher animation playback speed.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**|
-| curve      | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;ICurve<sup>9+</sup> | No  | Animation curve.<br>Default value: **Curve.Linear**  |
+| curve      | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve<sup>9+</sup> | No  | Animation curve.<br>Default value: **Curve.Linear**  |
 | delay      | number                                    | No   | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.<br>Default value: **0**  |
 | iterations | number                                    | No   | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
 | playMode   | [PlayMode](ts-appendix-enums.md#playmode) | No   | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**|
@@ -31,34 +29,49 @@ Applies a property animator to the component to animate its attributes over time
 @Entry
 @Component
 struct AttrAnimationExample {
-  @State widthSize: number = 200;
-  @State heightSize: number = 100;
-  @State flag: boolean = true;
+  @State widthSize: number = 250
+  @State heightSize: number = 100
+  @State rotateAngle: number = 0
+  @State flag: boolean = true
 
   build() {
     Column() {
-      Button('click me')
-        .onClick((event: ClickEvent) => {
+      Button('change width and height')
+        .onClick(() => {
           if (this.flag) {
             this.widthSize = 100
             this.heightSize = 50
           } else {
-            this.widthSize = 200
+            this.widthSize = 250
             this.heightSize = 100
           }
           this.flag = !this.flag
         })
-        .width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff)
+        .margin(30)
+        .width(this.widthSize)
+        .height(this.heightSize)
         .animation({
-          duration: 2000, // Animation duration
-          curve: Curve.EaseOut, // Animation curve
-          delay: 500, // Animation delay
-          iterations: 1, // Number of playback times
-          playMode: PlayMode.Normal // Animation playback mode
-        }) // Animation configuration for the width and height attributes of the <Button> component
-    }.width('100%').margin({ top: 5 })
+          duration: 2000,
+          curve: Curve.EaseOut,
+          iterations: 3,
+          playMode: PlayMode.Normal
+        })
+      Button('change rotate angle')
+        .onClick(() => {
+          this.rotateAngle = 90
+        })
+        .margin(50)
+        .rotate({ angle: this.rotateAngle })
+        .animation({
+          duration: 1200,
+          curve: Curve.Friction,
+          delay: 500,
+          iterations: -1,   // The value -1 indicates that the animation is played for an unlimited number of times.
+          playMode: PlayMode.AlternateReverse
+        })
+    }.width('100%').margin({ top: 20 })
   }
 }
 ```
 
-![en-us_image_0000001212378444](figures/en-us_image_0000001212378444.gif)
+![animation](figures/animation.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
index fa5705777b76c6c4e94e261efbda40a64054c991..e1e4ac13b65cdec171016867e8b90dfa390efe6f 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
@@ -14,26 +14,26 @@ This component can contain only one child component.
 
 ## APIs
 
-**Method 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean})
+**API 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean})
 
 **Parameters**
 
 | Name        | Type      | Mandatory       | Description                             |
 | ----------- | ---------- | ------| --------------------------------- |
 | type        | ButtonType | No   | Button type.<br>Default value: **ButtonType.Capsule**                          |
-| stateEffect | boolean    | No   |  Whether to enable the state switchover effect for when the button is touched or clicked. The value **false** indicates that the state switchover effect is disabled.<br>Default value: **true**|
+| stateEffect | boolean    | No   |  Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**|
 
 
-**Method 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
+**API 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
 
   Creates a button component based on text content. In this case, the component cannot contain child components.
 
 **Parameters**
 
-  | Name    | Type                               | Mandatory  | Description         |
-  | ------- | ----------------------------------- | ---- | ------------- |
-  | label   | [ResourceStr](ts-types.md#resourcestr) | No   | Button text.      |
-  | options | Object                              | No   | For details, see **options**.|
+| Name    | Type                               | Mandatory  | Description         |
+| ------- | ----------------------------------- | ---- | ------------- |
+| label   | [ResourceStr](ts-types.md#resourcestr) | No   | Button text.      |
+| options | { type?: ButtonType, stateEffect?: boolean }   | No   | See parameters of API 1.|
 
 
 ## Attributes
@@ -41,7 +41,7 @@ This component can contain only one child component.
 | Name         | Type          | Description                               |
 | ----------- | ----------- | --------------------------------- |
 | type        | ButtonType  |  Button type.<br>Default value: **ButtonType.Capsule**                      |
-| stateEffect | boolean     |  Whether to enable the state switchover effect. The value **false** indicates that the state switchover effect is disabled.<br>Default value: **true**|
+| stateEffect | boolean     |  Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**|
 
 ## ButtonType enums
 | Name     | Description                |
@@ -66,43 +66,42 @@ This component can contain only one child component.
 struct ButtonExample {
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
-      Text('Common button').fontSize(9).fontColor(0xCCCCCC)
+      Text('Normal button').fontSize(9).fontColor(0xCCCCCC)
       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
-        Button('Ok', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
+        Button('OK', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
         Button({ type: ButtonType.Normal, stateEffect: true }) {
           Row() {
-            // To import an image, you are advised to create a Resource object through $r.
-            Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 })
+            LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
           }.alignItems(VerticalAlign.Center)
-        }.borderRadius(8).backgroundColor(0x317aff).width(90)
-        Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.5)
+        }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
+
+        Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4)
           .borderRadius(8).backgroundColor(0x317aff).width(90)
       }
 
       Text('Capsule button').fontSize(9).fontColor(0xCCCCCC)
       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
-        Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)
+        Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)
         Button({ type: ButtonType.Capsule, stateEffect: true }) {
           Row() {
-            Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 })
+            LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
-          }.alignItems(VerticalAlign.Center).width(90)
+          }.alignItems(VerticalAlign.Center).width(90).height(40)
         }.backgroundColor(0x317aff)
-        .onClick((event: ClickEvent) => {
-          AlertDialog.show({ message: 'The login is successful' })
-        })
-        Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.5)
+
+        Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4)
           .backgroundColor(0x317aff).width(90)
       }
 
       Text('Circle button').fontSize(9).fontColor(0xCCCCCC)
       Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
         Button({ type: ButtonType.Circle, stateEffect: true }) {
-          Image($r('app.media.ic_public_app_filled')).width(20).height(20)
+          LoadingProgress().width(20).height(20).color(0xFFFFFF)
         }.width(55).height(55).backgroundColor(0x317aff)
+
         Button({ type: ButtonType.Circle, stateEffect: true }) {
-          Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
+          LoadingProgress().width(20).height(20).color(0xFFFFFF)
         }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
       }
     }.height(400).padding({ left: 35, right: 35, top: 35 })
@@ -110,4 +109,4 @@ struct ButtonExample {
 }
 ```
 
-![en-us_image_0000001257138341](figures/en-us_image_0000001257138341.gif)
+![button](figures/button.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
index 3f98dbecbfc01753d05eab1f5b14cc915afd2aa4..daf2238308091eaab298b7a757f0ef6e844eceb3 100644
--- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md
@@ -7,10 +7,12 @@ You can create explicit animation with your custom settings.
 >  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-| API                                                    | Description                                                    |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| animateTo(value: [AnimateParam](#animateparam), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
+animateTo(value: AnimateParam, event: () => void): void
 
+| Name            | Type       |       Mandatory    |        Description       |
+| ---------------- | ------------ | -------------------- | -------------------- |
+| value | [AnimateParam](#animateparam)| Yes| Animation settings.|
+| event | () => void | Yes| Closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
 
 ## AnimateParam
 
@@ -25,7 +27,6 @@ You can create explicit animation with your custom settings.
 | onFinish   | () =&gt; void   | Callback invoked when the animation playback is complete.|
 
 
-
 ## Example
 
 ```ts
@@ -33,26 +34,24 @@ You can create explicit animation with your custom settings.
 @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) => {
-          // Animation configuration for the width and height attributes of the <Button> component
+        .margin(30)
+        .onClick(() => {
           if (this.flag) {
             animateTo({
-              duration: 1000, // Animation duration
-              tempo: 0.5, // Playback speed
-              curve: Curve.EaseInOut, // Animation curve
-              delay: 200, // Animation delay
-              iterations: 1, // Number of playback times
-              playMode: PlayMode.Normal // Animation playback mode
+              duration: 2000,
+              curve: Curve.EaseOut,
+              iterations: 3,
+              playMode: PlayMode.Normal,
               onFinish: () => {
                 console.info('play end')
               }
@@ -61,25 +60,39 @@ struct AnimateToExample {
               this.heightSize = 50
             })
           } else {
-            animateTo({
-              duration: 200, // Animation duration
-              curve: Curve.Ease, // Animated curve
-              delay: 200, // Animation delay
-              iterations: 1, // Number of playback times
-              playMode: PlayMode.Normal // Animation playback mode
-              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({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
+        .onClick(() => {
+          animateTo({
+            duration: 1200,
+            curve: Curve.Friction,
+            delay: 500,
+            iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times.
+            playMode: PlayMode.AlternateReverse,
+            onFinish: () => {
+              console.info('play end')
+            }
+          }, () => {
+            this.rotateAngle = 90
+          })
+        })
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
 
-![en-us_image_0000001256978345](figures/en-us_image_0000001256978345.gif)
+The figure below shows two buttons in their initial state.
+
+![animation](figures/animation.PNG)
+
+Clicking the first button plays the animation of resizing the button, and clicking the second button plays the animation of rotating the button clockwise by 90 degrees. The figure below shows the two buttons when the animations have finished.
+
+![animation1](figures/animation1.PNG)
diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
index 457fbe710bf5c28a0e9d94b9a25737d806cc08f3..21bb3d6a2890f13215b0f331f3bbab298c0d1de0 100644
--- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md
+++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md
@@ -22,12 +22,12 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
 
 **Parameters**
 
-| Name             | Type                                                    | Mandatory| Description                                                    |
-| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| src                 | string \| [Resource](ts-types.md)                   | No  | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
-| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No  | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: **1.0** \| PlaybackSpeed.Speed_Forward_1_00_X |
-| previewUri          | string \| PixelMap<sup>8+</sup> \| [Resource](ts-types.md) | No  | Path of the preview image.                                            |
-| controller          | [VideoController](#videocontroller)                          | No  | Controller.                                                    |
+| Name                | Type                                    | Mandatory  | Description                                    |
+| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| src                 | string \| [Resource](ts-types.md)        | No   | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which indicates that the path is provided by a Data ability. For details about the path, see [Data Ability Development](../../application-models/dataability-overview.md).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
+| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No   | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: **1.0** \| **PlaybackSpeed.Speed_Forward_1_00_X** |
+| previewUri          | string \| PixelMap<sup>8+</sup> \| [Resource](ts-types.md) | No   | Path of the preview image.                          |
+| controller          | [VideoController](#videocontroller)      | No   | Video controller.                                |
 
 ## PlaybackSpeed<sup>8+</sup>
 
@@ -43,29 +43,29 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
 
 In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-| Name     | Type                                | Description                                           |
-| --------- | ---------------------------------------- | ----------------------------------------------- |
-| muted     | boolean                                  | Whether to mute the video.<br>Default value: **false**                   |
-| autoPlay  | boolean                                  | Whether to enable auto play.<br>Default value: **false**               |
+| Name       | Type                                    | Description                          |
+| --------- | ---------------------------------------- | ---------------------------- |
+| muted     | boolean                                  | Whether to mute the video.<br>Default value: **false**         |
+| autoPlay  | boolean                                  | Whether to enable auto play.<br>Default value: **false**       |
 | controls  | boolean                                  | Whether to display the video playback control bar.<br>Default value: **true**|
-| objectFit | [ImageFit](ts-basic-components-image.md) | Video scale type.<br>Default value: **Cover**           |
-| loop      | boolean                                  | Whether to repeat the video.<br>Default value: **false**       |
+| objectFit | [ImageFit](ts-basic-components-image.md) | Video scale type.<br>Default value: **Cover**     |
+| loop      | boolean                                  | Whether to repeat the video.<br>Default value: **false**   |
 
 ## Events
 
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
 
-| Name                                                        | Description                                                    |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onStart(event:() =&gt; void)                       | Triggered when the video is played.                                          |
-| onPause(event:() =&gt; void)                       | Triggered when the video playback is paused.                                          |
-| onFinish(event:() =&gt; void)                      | Triggered when the video playback is finished.                                      |
-| onError(event:() =&gt; void)                       | Triggered when the video playback fails.                                      |
+| Name                                      | Description                                    |
+| ---------------------------------------- | ---------------------------------------- |
+| onStart(event:() =&gt; void)   | Triggered when the video is played.                               |
+| onPause(event:() =&gt; void)   | Triggered when the video playback is paused.                               |
+| onFinish(event:() =&gt; void)  | Triggered when the video playback is finished.                             |
+| onError(event:() =&gt; void)   | Triggered when the video playback fails.                             |
 | onPrepared(callback:(event?: { duration: number }) =&gt; void) | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
-| onSeeking(callback:(event?: { time: number }) =&gt; void) | Triggered to report the time (in seconds) when the progress bar is being dragged.                     |
-| onSeeked(callback:(event?: { time: number }) =&gt; void) | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.               |
-| onUpdate(callback:(event?: { time: number }) =&gt; void) | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.    |
-| onFullscreenChange(callback:(event?: { fullscreen: boolean }) =&gt; void) | Triggered when the playback mode is switched between full-screen mode and non-full-screen mode. The value **true** means that the playback is in full-screen mode, and **false** means that the playback is non-full-screen mode.    |
+| onSeeking(callback:(event?: { time: number }) =&gt; void) | Triggered to report the time (in seconds) when the progress bar is being dragged.                    |
+| onSeeked(callback:(event?: { time: number }) =&gt; void) | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.                 |
+| onUpdate(callback:(event?: { time: number }) =&gt; void) | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.         |
+| onFullscreenChange(callback:(event?: { fullscreen: boolean }) =&gt; void) | Triggered when the playback mode is switched between full-screen mode and non-full-screen mode. The value **true** means that the playback is in full-screen mode, and **false** means that the playback is non-full-screen mode.|
 
 
 ## VideoController
@@ -76,7 +76,7 @@ Defines a **VideoController** object to control one or more videos.
 ### Objects to Import
 
 ```ts
-controller: VideoController = new VideoController();
+controller: VideoController = new VideoController()
 ```
 
 
@@ -90,13 +90,13 @@ Starts playback.
 
 pause(): void
 
-Pauses playback.
+Pauses playback. The current frame is then displayed, and playback will be resumed from this paused position.
 
 ### stop
 
 stop(): void
 
-Stops playback.
+Stops playback. The current frame is then displayed, and playback will restart from the very beginning.
 
 ### setCurrentTime
 
@@ -106,9 +106,9 @@ Sets the video playback position.
 
 **Parameters**
 
-| Name| Type| Mandatory| Description                   |
-| ------ | -------- | ---- | --------------------------- |
-| value  | number   | Yes  | Video playback position, in seconds.|
+| Name  | Type  | Mandatory  | Description          |
+| ----- | ------ | ---- | -------------- |
+| value | number | Yes   | Video playback position, in seconds.|
 
 ### requestFullscreen
 
@@ -118,8 +118,8 @@ Requests full-screen mode.
 
 **Parameters**
 
-| Name  | Type  | Mandatory  | Description   |
-| ----- | ------ | ---- | ------- |
+| Name  | Type   | Mandatory  | Description                 |
+| ----- | ------- | ---- | --------------------- |
 | value | boolean | Yes   | Whether the playback is in full-screen mode.<br>Default value: **false**|
 
 ### exitFullscreen
@@ -136,10 +136,10 @@ Sets the video playback position with the specified seek mode.
 
 **Parameters**
 
-| Name  | Type| Mandatory| Description          |
-| -------- | -------- | ---- | ------------------ |
-| value    | number   | Yes  | Video playback position.|
-| seekMode | SeekMode | Yes  | Seek mode.        |
+| Name     | Type    | Mandatory  | Description          |
+| -------- | -------- | ---- | -------------- |
+| value    | number   | Yes   | Video playback position, in seconds.|
+| seekMode | SeekMode | Yes   | Seek mode.         |
 
 ## SeekMode<sup>8+</sup>
 
@@ -159,77 +159,89 @@ Sets the video playback position with the specified seek mode.
 @Entry
 @Component
 struct VideoCreateComponent {
-  @State srcs: Resource = $rawfile('video1.mp4');
-  @State previewUris: Resource = $r('app.media.img');
-  @State currentProgressRates: number = 1;
-  @State autoPlays: boolean = false;
-  @State controlsss: boolean = true;
-  controller: VideoController = new VideoController();
-  
+  @State videoSrc: Resource = $rawfile('video1.mp4')
+  @State previewUri: Resource = $r('app.media.poster1')
+  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
+  @State isAutoPlay: boolean = false
+  @State showControls: boolean = true
+  controller: VideoController = new VideoController()
+
   build() {
     Column() {
       Video({
-        src: this.srcs,
-        previewUri: this.previewUris, 
-        currentProgressRate: this.currentProgressRates,
+        src: this.videoSrc,
+        previewUri: this.previewUri,
+        currentProgressRate: this.curRate,
         controller: this.controller
-      }).width(700).height(500)
-        .autoPlay(this.autoPlays)
-        .controls(this.controlsss)
+      }).width(800).height(600)
+        .autoPlay(this.isAutoPlay)
+        .controls(this.showControls)
         .onStart(() => {
-                  console.error('onStart');
-                })
+          console.info('onStart')
+        })
         .onPause(() => {
-                  console.error('onPause');
-                })
+          console.info('onPause')
+        })
         .onFinish(() => {
-                  console.error('onFinish');
-                })
+          console.info('onFinish')
+        })
         .onError(() => {
-                  console.error('onFinish');
-                })
+          console.info('onFinish')
+        })
         .onPrepared((e) => {
-                    console.error('onPrepared is ' + e.duration);
-                })
+          console.info('onPrepared is ' + e.duration)
+        })
         .onSeeking((e) => {
-                    console.error('onSeeking is ' + e.time);
-                })
+          console.info('onSeeking is ' + e.time)
+        })
         .onSeeked((e) => {
-                    console.error('onSeekedis ' + e.time);
-                })
+          console.info('onSeeked is ' + e.time)
+        })
         .onUpdate((e) => {
-                    console.error('onUpdateis ' + e.time);
-                })
+          console.info('onUpdate is ' + e.time)
+        })
+      
       Row() {
-        Button("src").onClick(() => {
-            this.srcs = $rawfile('video2.mp4');
-        });
-        Button("previewUri").onClick(() => {
-            this.previewUris = $r('app.media.img1');
-        });
-        Button("controlsss").onClick(() => {
-          this.controlsss = !this.controlsss;
-        });
+        Button('src').onClick(() => {
+          this.videoSrc = $rawfile('video2.mp4') // Switch the video source.
+        }).margin(5)
+        Button('previewUri').onClick(() => {
+          this.previewUri = $r('app.media.poster2') // Switch the preview image.
+        }).margin(5)
+        Button('controls').onClick(() => {
+          this.showControls = !this.showControls // Specify whether to show the control bar.
+        }).margin(5)
       }
 
       Row() {
-        Button("start").onClick(() => {
-          this.controller.start();
-        });
-        Button("pause").onClick(() => {
-          this.controller.pause();
-        });
-        Button("stop").onClick(() => {
-          this.controller.stop();
-        });
+        Button('start').onClick(() => {
+          this.controller.start() // Start playback.
+        }).margin(5)
+        Button('pause').onClick(() => {
+          this.controller.pause() // Pause playback.
+        }).margin(5)
+        Button('stop').onClick(() => {
+          this.controller.stop() // Stop playback.
+        }).margin(5)
+        Button('setTime').onClick(() => {
+          this.controller.setCurrentTime(10, SeekMode.Accurate) // Seek to the 10s position of the video.
+        }).margin(5)
       }
 
       Row() {
-        Button("setCurrentTime").onClick(() => {
-          this.controller.setCurrentTime(9, SeekMode.Accurate);
-        });
+        Button('rate 0.75').onClick(() => {
+          this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // Play the video at the 0.75x speed.
+        }).margin(5)
+        Button('rate 1').onClick(() => {
+          this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // Play the video at the 1x speed.
+        }).margin(5)
+        Button('rate 2').onClick(() => {
+          this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // Play the video at the 2x speed.
+        }).margin(5)
       }
     }
   }
 }
 ```
+
+<!--no_check-->
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
index c393bf5812f9508448891111012d6c839cf6fb5c..96d2620e251877f5e183e9a085708a634d4e850a 100644
--- a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
@@ -12,12 +12,12 @@ Shared element transition can be used for transition between pages, for example,
 
 | Name            | Parameters                                                        | Description                                                    |
 | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| sharedTransition | id: string,<br>{<br>duration?: number,<br>curve?: Curve \| string,<br>delay?: number,<br>motionPath?: <br>{<br>path: string,<br>form?: number,<br>to?: number,<br>rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: Animation duration, in ms. The default duration is 1000 ms.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: Delay of animation playback, in ms. By default, the playback is not delayed.<br>- **motionPath**: motion path information.<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
+| sharedTransition | id: string,<br>{<br> duration?: number,<br> curve?: Curve \| string,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: animation duration, in ms. The default duration is 1000 ms.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: Delay of animation playback, in ms. By default, the playback is not delayed.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
 
 
 ## Example
 
-The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image.
+  The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image.
 
 ```ts
 // xxx.ets
@@ -27,20 +27,14 @@ struct SharedTransitionExample {
   @State active: boolean = false
 
   build() {
-    List() {
-      ListItem() {
-        Row() {
-          Navigator({ target: 'pages/common/Animation/transAnimation/PageB', type: NavigationType.Push }) {
-            Image($r('app.media.ic_health_heart')).width(50).height(50)
-              .sharedTransition('sharedImage1', { duration: 800, curve: Curve.Linear, delay: 100 })
-          }.padding({ left: 10 })
-          .onClick(() => {
-            this.active = true
-          })
-
-          Text('SharedTransition').width(80).height(80).textAlign(TextAlign.Center)
-        }
-      }
+    Column() {
+      Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
+        Image($r('app.media.ic_health_heart')).width(50).height(50)
+          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
+      }.padding({ left: 20, top: 20 })
+      .onClick(() => {
+        this.active = true
+      })
     }
   }
 }
@@ -50,14 +44,13 @@ struct SharedTransitionExample {
 // PageB.ets
 @Entry
 @Component
-struct BExample {
-
+struct pageBExample {
   build() {
     Stack() {
-      Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1')
-    }.width('100%').height(400)
+      Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage')
+    }.width('100%').height('100%')
   }
 }
 ```
 
-![en-us_image_0000001211898494](figures/en-us_image_0000001211898494.gif)
+![shared](figures/shared.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
index da9f86c336021bc5f7cc10b57803ef7ef2371f2f..9234810c88d381fbeda3bbc8e9b79a244d5f74ac 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
@@ -10,10 +10,10 @@
 
 | Name        | Type                                    | Description                                      |
 | ---------- | ---------------------------------------- | ---------------------------------------- |
-| flexBasis  | number \| string                         | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
+| flexBasis  | number \| string                         | Base size of the component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)<br>This attribute cannot be set in percentage.|
 | flexGrow   | number                                   | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**      |
 | flexShrink | number                                   | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.      |
-| alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis, which overwrites the default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto**|
+| alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container.<br>Default value: **ItemAlign.Auto**|
 
 
 ## Example
@@ -30,82 +30,79 @@ struct FlexExample {
       // The value of flexBasis() can be 'auto' or a number, which is equivalent to .width()/.height().
       Flex() {
         Text('flexBasis(100)')
-          .flexBasis('100')
+          .flexBasis(100) // The width is 100 vp.
           .height(100)
-          .lineHeight(70)
           .backgroundColor(0xF5DEB3)
           .textAlign(TextAlign.Center)
-        Text('flexBasis("auto")')
-          .flexBasis('auto')
+        Text(`flexBasis('auto')`)
+          .flexBasis('auto') // The width is 60% of the original width.
           .width('60%')
           .height(100)
-          .lineHeight(70)
           .backgroundColor(0xD2B48C)
           .textAlign(TextAlign.Center)
       }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
 
       Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
-      // Percentage of the remaining space
-      // flexGrow() specifies the percentage of the remaining space allocated to the component.
+      // flexGrow() indicates the percentage of the remaining space allocated to the component.
       Flex() {
         Text('flexGrow(2)')
-          .flexGrow(2)
+          .flexGrow(2) // The width allocated to the <Text> component is 2/3 of the remaining width of the parent container.
           .height(100)
-          .lineHeight(70)
           .backgroundColor(0xF5DEB3)
           .textAlign(TextAlign.Center)
         Text('flexGrow(1)')
-          .flexGrow(1)
+          .flexGrow(1) // The width allocated to the <Text> component is 1/3 of the remaining width of the parent container.
           .height(100)
-          .lineHeight(70)
           .backgroundColor(0xD2B48C)
           .textAlign(TextAlign.Center)
       }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
 
       Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
-      // flexShrink() specifies the percentage of the shrink size allocated to the component.
-      // The ratio of text1 is 0, and the default values of other parameters are 1. If the components cannot be completely displayed, the last two components are shrunk proportionally. The first component is not shrunk.
+      // flexShrink() indicates the percentage of the shrink size allocated to the component.
+      // The value is 0 for the first <Text> component and 1 for the other two <Text> components. This means that, if the components cannot be completely displayed in the parent container, the latter two are shrunk proportionally, while the former is not shrunk.
       Flex({ direction: FlexDirection.Row }) {
         Text('flexShrink(0)')
           .flexShrink(0)
           .width('50%')
           .height(100)
-          .lineHeight(70)
           .backgroundColor(0xF5DEB3)
           .textAlign(TextAlign.Center)
-        Text('no flexShrink')
+        Text('default flexShrink') // The default value is 1.
           .width('40%')
           .height(100)
-          .lineHeight(70)
           .backgroundColor(0xD2B48C)
           .textAlign(TextAlign.Center)
-        Text('flexShrink(2)')
-          .flexShrink(2)
+        Text('flexShrink(1)')
+          .flexShrink(1)
           .width('40%')
           .height(100)
-          .lineHeight(70)
           .backgroundColor(0xF5DEB3)
           .textAlign(TextAlign.Center)
       }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
 
       Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
-      // alignSelf() overwrites the default alignItems configuration in the flex layout.
+      // The alignSelf setting overrides the alignItems setting of the parent container.
       Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
-        Text('no alignSelf,height:80').width('33%').height(80)
-          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
-        Text('alignSelf stretch')
-          .alignSelf(ItemAlign.Stretch)
+        Text('no alignSelf,height:70')
           .width('33%')
-          .height(80)
-          .lineHeight(70)
+          .height(70)
+          .backgroundColor(0xF5DEB3)
+          .textAlign(TextAlign.Center)
+        Text('alignSelf End')
+          .alignSelf(ItemAlign.End)
+          .width('33%')
+          .height(70)
           .backgroundColor(0xD2B48C)
           .textAlign(TextAlign.Center)
-        Text('no alignSelf,height:100').width('34%').height(100)
-          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+        Text('no alignSelf,height:100%')
+          .width('34%')
+          .height('100%')
+          .backgroundColor(0xF5DEB3)
+          .textAlign(TextAlign.Center)
       }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
 
-![en-us_image_0000001212378394](figures/en-us_image_0000001212378394.png)
+![flex](figures/flex.PNG)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-restoreId.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-restoreId.md
index 644fbdc9fe511bed688dcaaa57d87cb7b628dee3..8696019fb837eb01f344297da9397406f4d1f4a1 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-restoreId.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-restoreId.md
@@ -10,16 +10,16 @@ The **restoreId** attribute identifies a component in distributed migration scen
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| restoreId | number | ID of the component used for matching during distributed migration. This ID must be unique within an application.|
+| restoreId | number | ID of the component used for device matching during distributed migration. This ID must be unique within an application.|
 
 ## Components with Distributed Migration Support
 
-| Name| Initial Version| Migration Status|
+| Name| Initial API Version| Migration Status|
 | -------- | -------- | -------- |
-| List | 8 | The sequence number of the item displayed on the top of the current device will be migrated to the remote device. After the migration, the item is completely displayed on the top of the remote device.|
-| Grid | 9 | The sequence number of the item displayed on the top of the current device will be migrated to the remote device. After the migration, the item is completely displayed on the top of the remote device. The position of the scrollbar cannot be migrated.|
-| Scroll | 9 | The absolute distance with the top edge for scrolling will be migrated. Due to layout inconsistency resulting from differences in the display specifications between devices, the migration effect may be affected.|
-| TextArea | 9 | The text content and the position of the caret will be migrated.|
+| List      | 8 | The index of the list item displayed at the top of the list on the current device will be migrated to the remote device. After the migration, the list item that matches the index is displayed at the top of the list on the remote device.|
+| Grid      | 9 | The index of the grid item displayed at the top of the grid on the current device will be migrated to the remote device. After the migration, the grid item that matches the index is displayed at the top of the grid on the remote device. The position of the scrollbar cannot be migrated.|
+| Scroll    | 9 | The absolute distance with the top edge for scrolling will be migrated. Due to layout inconsistency resulting from differences in the display specifications between devices, the migration effect may be affected.|
+| TextArea  | 9 | The text content and the position of the caret will be migrated.|
 | TextInput | 9 | The text content and the position of the caret will be migrated.|
 
 ## Example
@@ -39,7 +39,6 @@ struct RestoreIdExample {
               .width('100%')
               .height(100)
               .fontSize(16)
-              .fontColor(0xFFFFFF)
               .textAlign(TextAlign.Center)
               .borderRadius(10)
               .backgroundColor(Color.Pink)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
index b0d33d1ca165b386a920c0a9f2f1e7c8db534736..3aaeb64451a672c5eb662fb4f79f166fd7afcab5 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
@@ -10,10 +10,10 @@ Shape clipping changes the visible portion of a component through clipping or ma
 ## Attributes
 
 
-| Name | Type                                    | Description                                 |
+| Name   | Type                                    | Description                                 |
 | -----| ------------------------------------------ | ------------------------------------ |
-| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Specifies a clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline.<br>Default value: **false**|
-| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Adds a mask of the specified shape to the current component.|
+| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Clip mode. If the value is a shape, the component is clipped based on the specified shape. If the value is of the Boolean type, it specifies whether to clip the component based on the edge outline of the parent container.<br>Default value: **false**|
+| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Mask of the specified shape to add to the component.|
 
 
 ## Example
@@ -24,34 +24,33 @@ Shape clipping changes the visible portion of a component through clipping or ma
 @Component
 struct ClipAndMaskExample {
   build() {
-    Column({ space: 5 }) {
-      Text('clip').fontSize(9).width('90%').fontColor(0xCCCCCC)
-      // Clip the image by using a circle with a diameter of 280px.
-      Image($r('app.media.example'))
-        .clip(new Circle({ width: 80, height: 80 }))
-        .width('500px').height('280px')
-
+    Column({ space: 15 }) {
+      Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC')
       Row() {
-        Image($r('app.media.example')).width('500px').height('280px')
+        Image($r('app.media.testImg')).width('500px').height('280px')
       }
-      .clip(true)
+      .clip(true) // If clip is not set to true, the image is not confined by the rounded corners of the <Row> component and may extend beyond the <Row> component.
       .borderRadius(20)
+      // Clip the image based on a circle with a diameter of 280 px.
+      Image($r('app.media.testImg'))
+        .clip(new Circle({ width: '280px', height: '280px' }))
+        .width('500px').height('280px')
 
-      Text('mask').fontSize(9).width('90%').fontColor(0xCCCCCC)
-      // Add a 500 px x 280 px mask to the image.
-      Image($r('app.media.example'))
+      Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC')
+      // Add a 500 px x 280 px square mask to the image.
+      Image($r('app.media.testImg'))
         .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
         .width('500px').height('280px')
 
-      // Add a 280 px x 280 px circle mask to the image.
-      Image($r('app.media.example'))
+      // Add a 280 px x 280 px circular mask to the image.
+      Image($r('app.media.testImg'))
         .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray))
-        .width('500px').height('281px')
+        .width('500px').height('280px')
     }
     .width('100%')
-    .margin({ top: 5 })
+    .margin({ top: 15 })
   }
 }
 ```
 
-![en-us_image_0000001212218452](figures/en-us_image_0000001212218452.png)
+![clipAndMask](figures/clipAndMask.PNG)