diff --git a/zh-cn/application-dev/ui/figures/LazyForEach1.gif b/zh-cn/application-dev/ui/figures/LazyForEach1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..66730a7cdb85529ed96a084b9d9b98aaed18474d
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/LazyForEach1.gif differ
diff --git a/zh-cn/application-dev/ui/figures/aboutToAppear.gif b/zh-cn/application-dev/ui/figures/aboutToAppear.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6bddc173b59f69a746592ae8689b0443b704a8b3
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/aboutToAppear.gif differ
diff --git a/zh-cn/application-dev/ui/figures/component.PNG b/zh-cn/application-dev/ui/figures/component.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..bf949004e64004c9ac3f24f6edbd625b135c9717
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/component.PNG differ
diff --git a/zh-cn/application-dev/ui/figures/component.gif b/zh-cn/application-dev/ui/figures/component.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e50a590ed7049a3c52149d10886e5b38ffdae2a5
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/component.gif differ
diff --git a/zh-cn/application-dev/ui/figures/flex1.PNG b/zh-cn/application-dev/ui/figures/flex1.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..cb125f009c7473782b463689466708d49ae474e0
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/flex1.PNG differ
diff --git a/zh-cn/application-dev/ui/figures/isVisible.gif b/zh-cn/application-dev/ui/figures/isVisible.gif
new file mode 100644
index 0000000000000000000000000000000000000000..bdb7b5ae5fe49adfaf4eb48c1533e4fe599be612
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/isVisible.gif differ
diff --git a/zh-cn/application-dev/ui/figures/lifecycle.PNG b/zh-cn/application-dev/ui/figures/lifecycle.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..a9b5769ad867f880dbe2b746b15de80cadbf799e
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/lifecycle.PNG differ
diff --git a/zh-cn/application-dev/ui/figures/list1.gif b/zh-cn/application-dev/ui/figures/list1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f421df651539da975e30d2294598e587e44d665e
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/list1.gif differ
diff --git a/zh-cn/application-dev/ui/figures/list2.gif b/zh-cn/application-dev/ui/figures/list2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..97d8e42b844537f19ec1fab10aca7af58a45c0a4
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/list2.gif differ
diff --git a/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
index be2c5d6bafd52e044f30edf0f9f6c392bbd0b8c8..970076fbc3bdb74596a565cf1090f9765d01d4bf 100644
--- a/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
+++ b/zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
@@ -57,6 +57,8 @@ struct CountDownTimerComponent {
 }
 ```
 
+![aboutToAppear](figures/aboutToAppear.gif)
+
 上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。
 
 ## onPageShow
@@ -112,6 +114,8 @@ struct IndexComponent {
 }
 ```
 
+![lifecycle](figures/lifecycle.PNG)
+
 ## onLayout
 
 onLayout?(children: Array<LayoutChild>, constraint: [ConstraintSizeOptions](../reference/arkui-ts/ts-types.md#constraintsizeoptions)): void
diff --git a/zh-cn/application-dev/ui/ui-ts-developing-intro.md b/zh-cn/application-dev/ui/ui-ts-developing-intro.md
index 03f7fdf79c8b1f2d3480965fcbb0de3830bce65d..4ccf10c303fb292a1d0cef3e1c2508322a89df00 100644
--- a/zh-cn/application-dev/ui/ui-ts-developing-intro.md
+++ b/zh-cn/application-dev/ui/ui-ts-developing-intro.md
@@ -117,6 +117,8 @@ struct CompA {
 }
 ```
 
+![component](figures/component.PNG)
+
 ## 组件的状态更新
 
 组件的状态可以通过动态修改组件成员变量的值来更新，下面以示例来进行说明。
@@ -180,6 +182,8 @@ struct TimerComponent {
 }
 ```
 
+![component](figures/component.gif)
+
 **初始创建和渲染：**
 
 1. 创建父组件ParentComp；
diff --git a/zh-cn/application-dev/ui/ui-ts-performance-improvement-recommendation.md b/zh-cn/application-dev/ui/ui-ts-performance-improvement-recommendation.md
index e37724ed2f5d44cf9557e36bcc072f7430a81658..8a0b469305af0bb990edc42c04ef09c7cf65f189 100644
--- a/zh-cn/application-dev/ui/ui-ts-performance-improvement-recommendation.md
+++ b/zh-cn/application-dev/ui/ui-ts-performance-improvement-recommendation.md
@@ -127,6 +127,8 @@ struct MyComponent {
 }
 ```
 
+![LazyForEach1](figures/LazyForEach1.gif)
+
 上述代码在页面加载时仅初始化加载三个列表元素，之后每点击一次列表元素，将增加一个列表元素。
 
 ## 使用条件渲染替代显隐控制
@@ -179,6 +181,8 @@ struct MyComponent {
 }
 ```
 
+![isVisible](figures/isVisible.gif)
+
 ## 使用Column/Row替代Flex
 
 由于Flex容器组件默认情况下存在shrink导致二次布局，这会在一定程度上造成页面渲染上的性能劣化。
@@ -213,6 +217,8 @@ struct MyComponent {
 }
 ```
 
+![flex1](figures/flex1.PNG)
+
 ## 设置List组件的宽高
 
 开发者在使用Scroll容器组件嵌套List子组件时，若不指定List的宽高尺寸，则默认全部加载，如下所示：
@@ -259,7 +265,10 @@ struct MyComponent {
 }
 ```
 
+![list1](figures/list1.gif)
+
 ## 减少应用滑动白块
+
 应用通过增大List/Grid控件的cachedCount参数，调整UI的加载范围。cachedCount表示屏幕外List/Grid预加载item的个数。  
 如果需要请求网络图片，可以在item滑动到屏幕显示之前，提前下载好内容，从而减少滑动白块。  
 如下是使用cachedCount参数的例子：
@@ -269,33 +278,41 @@ struct MyComponent {
 @Component
 struct MyComponent {
   private source: MyDataSource = new MyDataSource();
+
   build() {
     List() {
-      LazyForEach (this.source, item => {
+      LazyForEach(this.source, item => {
         ListItem() {
           Text("Hello" + item)
-            .fontSize(100)
-            .onAppear(()=>{
+            .fontSize(50)
+            .onAppear(() => {
               console.log("appear:" + item)
             })
         }
       })
-    }.cachedCount(3)  // 扩大数值appear日志范围会变大
+    }.cachedCount(3) // 扩大数值appear日志范围会变大
   }
 }
+
 class MyDataSource implements IDataSource {
-  data: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
+  data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
+
   public totalCount(): number {
     return this.data.length
   }
+
   public getData(index: number): any {
     return this.data[index]
   }
+
   registerDataChangeListener(listener: DataChangeListener): void {
   }
+
   unregisterDataChangeListener(listener: DataChangeListener): void {
   }
 }
 ```
+![list2](figures/list2.gif)
+
 **使用说明：**
 cachedCount的增加会增大UI的cpu、内存开销。使用时需要根据实际情况，综合性能和用户体验进行调整。
\ No newline at end of file