diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
index 5c3d84a57f7637d25763872ba8850c69cb1a493a..2e143a899c388692f8ddcaf2568617404eb13eca 100644
--- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
@@ -53,6 +53,7 @@
- [拖拽控制](ts-universal-attributes-drag-drop.md)
- [安全区域](ts-universal-attributes-expand-safe-area.md)
- [特效绘制合并](ts-universal-attributes-use-effect.md)
+ - [组件内容填充方式](ts-universal-attributes-renderfit.md)
- 手势处理
- [绑定手势方法](ts-gesture-settings.md)
- 基础手势
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
index 6388f5bbf5c7ac0beacb6a6e954b51bd87e117d2..1ae9b79ceea9fc4e09d59275011bea470857639b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
@@ -1,6 +1,6 @@
# 属性动画
-组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画，内容都是直接到终点状态，例如文字、canvas的内容、linearGradient等，如果要内容跟随宽高变化，可以使用[renderFit](ts-universal_attributes-renderfit.md)属性配置。
+组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画，内容都是直接到终点状态，例如文字、canvas的内容、linearGradient等，如果要内容跟随宽高变化，可以使用[renderFit](ts-universal-attributes-renderfit.md)属性配置。
> **说明：**
>
@@ -12,15 +12,15 @@ animation(value: {duration?: number, tempo?: number, curve?: string | Curve | IC
**参数：**
-| 名称 | 参数类型 | 必填 | 描述 |
-| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
-| duration | number | 否 | 设置动画时长。
默认值：1000
单位：毫秒
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
- 在ArkTS卡片上最大动画持续时间为1000毫秒。
- 设置小于0的值时按0处理。
- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
-| tempo | number | 否 | 动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢。
值为0时，表示不存在动画。
默认值：1
**说明：**
当设置小于0的值时按值为1处理。 |
-| curve | string \| [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)9+ | 否 | 设置动画曲线。
默认值：Curve.EaseInOut
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒，默认不延时播放。
默认值：0
取值范围：[0, +∞)
**说明：**
- 当设置的值小于0时按0处理。
- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
-| iterations | number | 否 | 设置播放次数。
默认值：1
取值范围：[-1, +∞)
**说明：**
设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
+| 名称 | 参数类型 | 必填 | 描述 |
+| ---------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| duration | number | 否 | 设置动画时长。
默认值：1000
单位：毫秒
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
- 在ArkTS卡片上最大动画持续时间为1000毫秒。
- 设置小于0的值时按0处理。
- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
+| tempo | number | 否 | 动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢。
值为0时，表示不存在动画。
默认值：1
**说明：**
当设置小于0的值时按值为1处理。 |
+| curve | string \| [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)9+ | 否 | 设置动画曲线。
默认值：Curve.EaseInOut
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒，默认不延时播放。
默认值：0
取值范围：[0, +∞)
**说明：**
- 当设置的值小于0时按0处理。
- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
+| iterations | number | 否 | 设置播放次数。
默认值：1
取值范围：[-1, +∞)
**说明：**
设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 否 | 设置动画播放模式，默认播放完成后重头开始播放。
默认值：PlayMode.Normal
从API version 9开始，该接口支持在ArkTS卡片中使用。
相关使用约束请参考PlayMode说明。 |
-| onFinish | () => void | 否 | 状态回调，动画播放完成时触发。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
当iterations设置为-1时，动画效果无限循环不会停止，所以不会触发此回调。 |
+| onFinish | () => void | 否 | 状态回调，动画播放完成时触发。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
当iterations设置为-1时，动画效果无限循环不会停止，所以不会触发此回调。 |
> **PlayMode说明：**
> - PlayMode推荐使用PlayMode.Normal和PlayMode.Alternate，此场景下动画的第一轮是正向播放的。如使用PlayMode.Reverse和PlayMode.AlternateReverse，则动画的第一轮是逆向播放的，在动画刚开始时会跳变到终止状态，然后逆向播放动画。
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
index eb028cd2f7e0c4bf04089475b8f1fefee0811ef9..4e99a4221f89dc457bfacf776e6344b45030dbe7 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
@@ -1,35 +1,35 @@
# 显式动画
-提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。同属性动画，布局类改变宽高的动画，内容都是直接到终点状态，例如文字、canvas的内容、linearGradient等，如果要内容跟随宽高变化，可以使用[renderFit](ts-universal_attributes-renderfit.md)属性配置。
+提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。同属性动画，布局类改变宽高的动画，内容都是直接到终点状态，例如文字、canvas的内容、linearGradient等，如果要内容跟随宽高变化，可以使用[renderFit](ts-universal-attributes-renderfit.md)属性配置。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
-> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)说明。
+> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)说明。
>
-> 从API version 10开始，可以通过使用[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)中的[animateTo](../apis/js-apis-arkui-UIContext.md#animateto)来明确UI的执行上下文。
+> 从API version 10开始，可以通过使用[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)中的[animateTo](../apis/js-apis-arkui-UIContext.md#animateto)来明确UI的执行上下文。
animateTo(value: AnimateParam, event: () => void): void
从API version 9开始，该接口支持在ArkTS卡片中使用。
-| 参数 | 类型 | 是否必填 | 描述 |
-| ---------------- | ------------ | -------------------- | -------------------- |
-| value | [AnimateParam](#animateparam对象说明) | 是 | 设置动画效果相关参数。 |
-| event | () => void | 是 | 指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
+| 参数 | 类型 | 是否必填 | 描述 |
+| ----- | --------------------------------- | ---- | ------------------------------------- |
+| value | [AnimateParam](#animateparam对象说明) | 是 | 设置动画效果相关参数。 |
+| event | () => void | 是 | 指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
## AnimateParam对象说明
-| 名称 | 类型 | 描述 |
-| -------- | -------- | -------- |
-| duration | number | 动画持续时间，单位为毫秒。
默认值：1000
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
- 在ArkTS卡片上最大动画持续时间为1000毫秒，若超出则固定为1000毫秒。
- 设置小于0的值时按0处理。
- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
-| tempo | number | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。
默认值：1.0
**说明：**
当设置小于0的值时按值为1处理。 |
-| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | 动画曲线。
默认值：Curve.EaseInOut
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| delay | number | 单位为ms(毫秒)，默认不延时播放。
默认值：0
**说明：**
- 当设置的值小于0时按0处理。
- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
-| iterations | number | 默认播放一次，设置为-1时表示无限次播放。
默认值：1 |
-| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 设置动画播放模式，默认播放完成后重头开始播放。
默认值：PlayMode.Normal
从API version 9开始，该接口支持在ArkTS卡片中使用。
相关使用约束请参考PlayMode说明。 |
-| onFinish | () => void | 动效播放完成回调。
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| 名称 | 类型 | 描述 |
+| ---------- | ---------------------------------------- | ---------------------------------------- |
+| duration | number | 动画持续时间，单位为毫秒。
默认值：1000
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
- 在ArkTS卡片上最大动画持续时间为1000毫秒，若超出则固定为1000毫秒。
- 设置小于0的值时按0处理。
- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
+| tempo | number | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。
默认值：1.0
**说明：**
当设置小于0的值时按值为1处理。 |
+| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | 动画曲线。
默认值：Curve.EaseInOut
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| delay | number | 单位为ms(毫秒)，默认不延时播放。
默认值：0
**说明：**
- 当设置的值小于0时按0处理。
- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 |
+| iterations | number | 默认播放一次，设置为-1时表示无限次播放。
默认值：1 |
+| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 设置动画播放模式，默认播放完成后重头开始播放。
默认值：PlayMode.Normal
从API version 9开始，该接口支持在ArkTS卡片中使用。
相关使用约束请参考PlayMode说明。 |
+| onFinish | () => void | 动效播放完成回调。
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
> **PlayMode说明：**
> - PlayMode推荐使用PlayMode.Normal和PlayMode.Alternate，此场景下动画的第一轮是正向播放的。如使用PlayMode.Reverse和PlayMode.AlternateReverse，则动画的第一轮是逆向播放的，在动画刚开始时会跳变到终止状态，然后逆向播放动画。
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-renderfit.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-renderfit.md
new file mode 100644
index 0000000000000000000000000000000000000000..2eee20194cf7f2da2425df45e18cd529744ea607
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-renderfit.md
@@ -0,0 +1,88 @@
+# 组件内容填充方式
+
+用于决定在组件的宽高动画过程中，如何将动画最终的组件内容绘制在组件上。
+
+> **说明：**
+>
+> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+## 属性
+
+| 名称 | 参数类型 | 必填 | 描述 |
+| --------- | --------------------------- | ---- | ---------------------------------------- |
+| renderFit | [RenderFit](#renderfit枚举说明) | 是 | 设置宽高动画过程中的组件内容填充方式。
当不设置renderFit属性时，取默认值RenderFit.TOP_LEFT。 |
+
+## RenderFit枚举说明
+
+| 名称 | 描述 | 示意图 |
+| --------------------------- | ---------------------------------------- | ---------------------------------------- |
+| CENTER | 保持动画终态的内容大小，并且内容始终与组件保持中心对齐。 |  |
+| TOP | 保持动画终态的内容大小，并且内容始终与组件保持顶部中心对齐。 |  |
+| BOTTOM | 保持动画终态的内容大小，并且内容始终与组件保持底部中心对齐。 |  |
+| LEFT | 保持动画终态的内容大小，并且内容始终与组件保持左侧对齐。 |  |
+| RIGHT | 保持动画终态的内容大小，并且内容始终与组件保持右侧对齐。 |  |
+| TOP_LEFT | 保持动画终态的内容大小，并且内容始终与组件保持左上角对齐。 |  |
+| TOP_RIGHT | 保持动画终态的内容大小，并且内容始终与组件保持右上角对齐。 |  |
+| BOTTOM_LEFT | 保持动画终态的内容大小，并且内容始终与组件保持左下角对齐。 |  |
+| BOTTOM_RIGHT | 保持动画终态的内容大小，并且内容始终与组件保持右下角对齐。 |  |
+| RESIZE_FILL | 不考虑动画终态内容的宽高比，并且内容始终缩放到组件的大小。 |  |
+| RESIZE_CONTAIN | 保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内，且与组件保持中心对齐。 |  |
+| RESIZE_CONTAIN_TOP_LEFT | 保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内。当组件宽方向有剩余时，内容与组件保持左侧对齐，当组件高方向有剩余时，内容与组件保持顶部对齐。 |  |
+| RESIZE_CONTAIN_BOTTOM_RIGHT | 保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内。当组件宽方向有剩余时，内容与组件保持右侧对齐，当组件高方向有剩余时，内容与组件保持底部对齐。 |  |
+| RESIZE_COVER | 保持动画终态内容的宽高比进行缩小或放大，使内容两边都大于或等于组件两边，且与组件保持中心对齐，显示内容的中间部分。 |  |
+| RESIZE_COVER_TOP_LEFT | 保持动画终态内容的宽高比进行缩小或放大，使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时，内容与组件保持左侧对齐，显示内容的左侧部分。当内容高方向有剩余时，内容与组件保持顶部对齐，显示内容的顶侧部分。 |  |
+| RESIZE_COVER_BOTTOM_RIGHT | 保持动画终态内容的宽高比进行缩小或放大，使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时，内容与组件保持右侧对齐，显示内容的右侧部分。当内容高方向有剩余时，内容与组件保持底部对齐，显示内容的底侧部分。 |  |
+
+> **说明：**
+>
+> - 示意图中，蓝色区域表示内容，橙黄色区域表示节点大小。
+> - 不同的内容填充方式在宽高动画过程中效果不一致，开发者需要选择合适的内容填充方式以实现需要的动画效果。
+
+## 示例
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct RenderFitExample {
+ @State width1: number = 100;
+ @State height1: number = 30;
+ flag: boolean = true;
+ build() {
+ Column() {
+ Text("Hello")
+ .width(this.width1)
+ .height(this.height1)
+ .borderWidth(1)
+ .textAlign(TextAlign.Start)
+ .renderFit(RenderFit.LEFT) // 设置LEFT的renderFit，动画过程中，动画的终态内容与组件保持左对齐
+ .margin(20)
+
+ Text("Hello")
+ .width(this.width1)
+ .height(this.height1)
+ .textAlign(TextAlign.Center)
+ .borderWidth(1)
+ .renderFit(RenderFit.CENTER) // 设置CENTER的renderFit，动画过程中，动画的终态内容与组件保持中心对齐
+ .margin(20)
+
+ Button("animate")
+ .onClick(() => {
+ animateTo({ curve: Curve.Ease }, () => {
+ if (this.flag) {
+ this.width1 = 150;
+ this.height1 = 50;
+ } else {
+ this.width1 = 100;
+ this.height1 = 30;
+ }
+ this.flag = !this.flag;
+ })
+ })
+ }.width("100%").height("100%").alignItems(HorizontalAlign.Center)
+ }
+}
+```
+
+
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal_attributes-renderfit.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal_attributes-renderfit.md
deleted file mode 100644
index 67beb9c7e16c97f4bd476cd7b258ed0ddc1cf838..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal_attributes-renderfit.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# 组件内容填充方式
-
-用于决定在组件的宽高动画过程中，如何将动画最终的组件内容绘制在组件上。
-
-> **说明：**
->
-> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 属性
-
-| 名称 | 参数类型 | 必填 | 描述 |
-| -----| ------------------------------------------ | -----| ------------------------------------ |
-| renderFit | [RenderFit](#renderfit枚举说明) | 是 | 设置宽高动画过程中的组件内容填充方式。
当不设置renderFit属性时，取默认值RenderFit.TOP_LEFT。 |
-
-## RenderFit枚举说明
-
-| 名称 | 描述 | 示意图 |
-| ------- | ------------------------------------ | --------------------------------- |
-| CENTER | 保持动画终态的内容大小，并且内容始终与组件保持中心对齐。 |  |
-| TOP | 保持动画终态的内容大小，并且内容始终与组件保持顶部中心对齐。 |  |
-| BOTTOM | 保持动画终态的内容大小，并且内容始终与组件保持底部中心对齐。 |  |
-| LEFT | 保持动画终态的内容大小，并且内容始终与组件保持左侧对齐。 |  |
-| RIGHT | 保持动画终态的内容大小，并且内容始终与组件保持右侧对齐。 |  |
-| TOP_LEFT | 保持动画终态的内容大小，并且内容始终与组件保持左上角对齐。 |  |
-| TOP_RIGHT | 保持动画终态的内容大小，并且内容始终与组件保持右上角对齐。 |  |
-| BOTTOM_LEFT | 保持动画终态的内容大小，并且内容始终与组件保持左下角对齐。 |  |
-| BOTTOM_RIGHT | 保持动画终态的内容大小，并且内容始终与组件保持右下角对齐。 |  |
-| RESIZE_FILL | 不考虑动画终态内容的宽高比，并且内容始终缩放到组件的大小。 |  |
-| RESIZE_CONTAIN | 保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内，且与组件保持中心对齐。 |  |
-| RESIZE_CONTAIN_TOP_LEFT | 保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内。当组件宽方向有剩余时，内容与组件保持左侧对齐，当组件高方向有剩余时，内容与组件保持顶部对齐。 |  |
-| RESIZE_CONTAIN_BOTTOM_RIGHT | 保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内。当组件宽方向有剩余时，内容与组件保持右侧对齐，当组件高方向有剩余时，内容与组件保持底部对齐。 |  |
-| RESIZE_COVER | 保持动画终态内容的宽高比进行缩小或放大，使内容两边都大于或等于组件两边，且与组件保持中心对齐，显示内容的中间部分。 |  |
-| RESIZE_COVER_TOP_LEFT | 保持动画终态内容的宽高比进行缩小或放大，使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时，内容与组件保持左侧对齐，显示内容的左侧部分。当内容高方向有剩余时，内容与组件保持顶部对齐，显示内容的顶侧部分。 |  |
-| RESIZE_COVER_BOTTOM_RIGHT | 保持动画终态内容的宽高比进行缩小或放大，使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时，内容与组件保持右侧对齐，显示内容的右侧部分。当内容高方向有剩余时，内容与组件保持底部对齐，显示内容的底侧部分。|  |
-
-> **说明：**
->
-> - 示意图中，蓝色区域表示内容，橙黄色区域表示节点大小。
-> - 不同的内容填充方式在宽高动画过程中效果不一致，开发者需要选择合适的内容填充方式以实现需要的动画效果。
-
-## 示例
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct RenderFitExample {
- @State width1: number = 100;
- @State height1: number = 30;
- flag: boolean = true;
- build() {
- Column() {
- Text("Hello")
- .width(this.width1)
- .height(this.height1)
- .borderWidth(1)
- .textAlign(TextAlign.Start)
- .renderFit(RenderFit.LEFT) // 设置LEFT的renderFit，动画过程中，动画的终态内容与组件保持左对齐
- .margin(20)
-
- Text("Hello")
- .width(this.width1)
- .height(this.height1)
- .textAlign(TextAlign.Center)
- .borderWidth(1)
- .renderFit(RenderFit.CENTER) // 设置CENTER的renderFit，动画过程中，动画的终态内容与组件保持中心对齐
- .margin(20)
-
- Button("animate")
- .onClick(() => {
- animateTo({ curve: Curve.Ease }, () => {
- if (this.flag) {
- this.width1 = 150;
- this.height1 = 50;
- } else {
- this.width1 = 100;
- this.height1 = 30;
- }
- this.flag = !this.flag;
- })
- })
- }.width("100%").height("100%").alignItems(HorizontalAlign.Center)
- }
-}
-```
-
-