diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/alphabet.gif b/zh-cn/application-dev/reference/arkui-ts/figures/alphabet.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a868febbcb800d9d0df0d3bfcaf57c64e570eb8a
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/alphabet.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/animateTo.gif b/zh-cn/application-dev/reference/arkui-ts/figures/animateTo.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8755e2bc014f3843f8798acae725eeb0fee11f54
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/animateTo.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/animation.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/animation.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..92f92e0001a90840d03ebd00e0b0ef736c2a94c8
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/animation.PNG differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/animation.gif b/zh-cn/application-dev/reference/arkui-ts/figures/animation.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6cfbc07fc5122be3ecd69e6b33b6f00c0f676a0f
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/animation.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/animation1.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/animation1.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..98cc1fa8c0537071549fa8185fa14f7ad103e7f8
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/animation1.PNG differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/button.gif b/zh-cn/application-dev/reference/arkui-ts/figures/button.gif
new file mode 100644
index 0000000000000000000000000000000000000000..04ab6ed97635118a7ffd3fb9d6be666f2ac40691
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/button.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/clipAndMask.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/clipAndMask.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..6f522bf5a01241f67ad8c493a04f3d9d71aa9be5
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/clipAndMask.PNG differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/flex.PNG b/zh-cn/application-dev/reference/arkui-ts/figures/flex.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..ccfb5020729aa765d259afd74fc93822c5752f4d
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/flex.PNG differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/shared.gif b/zh-cn/application-dev/reference/arkui-ts/figures/shared.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d43a6a38d9516945efc3ed80f4f1592c94645952
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/shared.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif b/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif
new file mode 100644
index 0000000000000000000000000000000000000000..692ac1398e1c98217a7466c66b1a3b873165a7ee
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/tabContent.gif b/zh-cn/application-dev/reference/arkui-ts/figures/tabContent.gif
new file mode 100644
index 0000000000000000000000000000000000000000..088045f41a884700791adf9fd6709f239c3269c0
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/tabContent.gif differ
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 7139f0fad8e3df8ec21e83e443150b23e8273ec3..adfe8558de0cf3cac1ec2cbe908c18c75a11f0ab 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
@@ -73,3 +73,5 @@ struct AttrAnimationExample {
   }
 }
 ```
+
+![animation](figures/animation.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
index e1214c92ca2e17e33b7fee457deff31f38ef20a1..c072a4cf54fec80813302d637c748ca382a60306 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
@@ -30,10 +30,10 @@
 
 **参数：**
 
-  | 参数名     | 参数类型                                | 必填   | 参数描述          |
-  | ------- | ----------------------------------- | ---- | ------------- |
-  | label   | [ResourceStr](ts-types.md#resourcestr) | 否    | 按钮文本内容。       |
-  | options | { type?: ButtonType, stateEffect?: boolean }   | 否    | 见方法1参数说明。 |
+| 参数名     | 参数类型                                | 必填   | 参数描述          |
+| ------- | ----------------------------------- | ---- | ------------- |
+| label   | [ResourceStr](ts-types.md#resourcestr) | 否    | 按钮文本内容。       |
+| options | { type?: ButtonType, stateEffect?: boolean }   | 否    | 见方法1参数说明。 |
 
 
 ## 属性
@@ -89,9 +89,6 @@ struct ButtonExample {
             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
           }.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.4)
           .backgroundColor(0x317aff).width(90)
@@ -112,3 +109,4 @@ struct ButtonExample {
 }
 ```
 
+![button](figures/button.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
index 60ea9a024d52626e00e67e5ba4fd7f27ae89043e..b4ba444f881be19c4be8bc5f5a422e3c0f3ec2d2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
@@ -162,3 +162,4 @@ struct AlphabetIndexerSample {
 }
 ```
 
+![alphabet](figures/alphabet.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
index 3ee143d2a165be8aef8e1b72df05461b5b021a00..b9d2e3f3300160393745c24a49bc8b3ac82b479b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -180,3 +180,5 @@ struct SwiperExample {
   }
 }
 ```
+
+![swiper](figures/swiper.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
index 3d9639247408e19edc2f5614306cabf12a5e5080..ac63672ce50807e39794c19b9aef87d9be25728c 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
@@ -113,3 +113,4 @@ struct TabContentExample {
 }
 ```
 
+![tabContent](figures/tabContent.gif)
\ No newline at end of file
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 fec478c62d03e2ebcc3816c032b71e13f23d14f3..eef21726017bab7f983eaa66d92615778127de09 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
@@ -88,3 +88,11 @@ struct AnimateToExample {
   }
 }
 ```
+
+示意图：
+
+![animation](figures/animation.PNG)
+
+点击第一个按钮播放改变按钮大小的动画，点击第二个按钮播放按钮顺时针旋转90度的动画。
+
+![animation1](figures/animation1.PNG)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
index 054824b2f7f471468a57cb0d41f48a1a7d66f439..1f97c15861aa8fb6b9e0627760346dd2a5262e58 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
@@ -59,3 +59,5 @@ struct TransitionExample {
   }
 }
 ```
+
+![animateTo](figures/animateTo.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
index 504037c0f918cb24e11f718434d084d363ab064e..021cc278c448273ae8cf0fbec7af7d77cf919152 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
@@ -53,3 +53,4 @@ struct pageBExample {
 }
 ```
 
+![shared](figures/shared.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
index 8dbcd0c5782d3f641edaa1a61049e1bd79c2a41d..176b1d4b04e4ba33d3adca9b8d309f2d3da6c7b8 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
@@ -105,4 +105,4 @@ struct FlexExample {
 }
 ```
 
-
+![flex](figures/flex.PNG)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
index 31022a190f924f115f28a04a0677333e14d0e823..00fe83401f13a4feded827a272cdba5dad75f4a9 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
@@ -53,3 +53,4 @@ struct ClipAndMaskExample {
 }
 ```
 
+![clipAndMask](figures/clipAndMask.PNG)
\ No newline at end of file