diff --git a/ETSUI/eTSArkUIAnimation/README.md b/ETSUI/eTSArkUIAnimation/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..5389b99b4d17bdd21c62e415cfa73e5d168c3bfb
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/README.md
@@ -0,0 +1,17 @@
+# Animation
+
+## Introduction
+
+This sample demonstrates the effect of the **AnimatorProperty** and **Explicit Animation**.
+
+## Usage
+
+1. Touch the round image on the home screen of the sample app to expand other images. This demonstrates the implementation of rotation and translation. Touch the round image again to collapse the images.
+
+2. Touch any expanded image to play the **AnimatorProperty**. This demonstrates the implementation of the rotation, scaling, and opacity change of the image.
+
+3. Touch the plus sign at the bottom of the home screen to increase the number of images. Touch the minus sign to decrease the number of images. The maximum number of images is 8, and the minimum number is 3. The default number is **3**.
+
+## Constraints
+
+This sample can only be run on standard-system devices.
diff --git a/ETSUI/eTSArkUIAnimation/README_zh.md b/ETSUI/eTSArkUIAnimation/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..2b0cefd2c84073ff528e1fad48d305d461f96567
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/README_zh.md
@@ -0,0 +1,19 @@
+# 动画
+
+## 简介
+
+本示例通过点击按钮触发动画，向用户展示属性动画与显示动画的效果。
+
+## 使用说明
+
+1.点击屏幕中的圆形图片，播放显示动画展开其它图片，实现整体的旋转与位移变换。再次点击主屏幕中间圆形图片，将其它图片收拢。
+
+2.点击展开后的任一图片，播放属性动画，实现图片的自转、缩放与透明度变换。
+
+3.点击页面下方加号按钮，将增加图片数量；点击减号按钮，将减少图片数量。图片数量最多增加至8张，最少减少至3张，默认为3张。
+
+## 约束与限制
+
+1.本示例仅支持在标准系统上运行。
+
+2.本示例需要使用3.0.0.961及以上的DevEco Studio版本才可编译运行。
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/build-profile.json5 b/ETSUI/eTSArkUIAnimation/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..fd8257fffcc462dc03b8c4588e2f889f6f2bf350
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/build-profile.json5
@@ -0,0 +1,27 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "compileSdkVersion": 8,
+    "compatibleSdkVersion": 8,
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+      },
+    ],
+  },
+  "modules": [
+    {
+      "name": "entry",
+      "srcPath": "./entry",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default",
+          ],
+        },
+      ],
+    },
+  ],
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/build-profile.json5 b/ETSUI/eTSArkUIAnimation/entry/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..ae58d1d0a70c602c9cfe1909b00dfec899ba1944
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/build-profile.json5
@@ -0,0 +1,13 @@
+{
+  "apiType": 'faMode',
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default",
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/hvigorfile.js b/ETSUI/eTSArkUIAnimation/entry/hvigorfile.js
new file mode 100644
index 0000000000000000000000000000000000000000..bcec4c99653062cbf17702c40a2dd2a7b809b81a
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/hvigorfile.js
@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').legacyHapTasks
diff --git a/ETSUI/eTSArkUIAnimation/entry/package.json b/ETSUI/eTSArkUIAnimation/entry/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..c4e988f30f2ec9e3430a4d0c8f05e89fabbc2659
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "entry",
+  "version": "1.0.0",
+  "ohos": {
+    "org": "huawei",
+    "buildTool": "hvigor",
+    "directoryLevel": "module"
+  },
+  "description": "example description",
+  "repository": {},
+  "license": "ISC",
+  "dependencies": {}
+}
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/config.json b/ETSUI/eTSArkUIAnimation/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..bc3c094fbb4fe2c207df830109d8f016415e42c5
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/config.json
@@ -0,0 +1,67 @@
+{
+  "app": {
+    "vendor": "samples",
+    "bundleName": "ohos.samples.etsarkuianimation",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "mainAbility": ".MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "visible": true,
+        "srcPath": "MainAbility",
+        "name": ".MainAbility",
+        "srcLanguage": "ets",
+        "icon": "$media:icon",
+        "description": "$string:description_mainability",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "distro": {
+      "moduleType": "entry",
+      "installationFree": false,
+      "deliveryWithInstall": true,
+      "moduleName": "entry"
+    },
+    "package": "ohos.samples.etsarkuianimation",
+    "srcPath": "",
+    "name": ".entry",
+    "js": [
+      {
+        "mode": {
+          "syntax": "ets",
+          "type": "pageAbility"
+        },
+        "pages": [
+          "pages/Index"
+        ],
+        "name": ".MainAbility",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/app.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/app.ets
new file mode 100644
index 0000000000000000000000000000000000000000..2eb18d66dc1b9324405a13e48bce34d033da27b2
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/app.ets
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+  onCreate() {
+    console.info('Application onCreate')
+  },
+  onDestroy() {
+    console.info('Application onDestroy')
+  },
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/SmallAnimation.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/SmallAnimation.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5cb9710be1ca50b70c0103e2765869678e76b866
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/SmallAnimation.ets
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Item } from '../model/Item'
+import { Point, AxisModel } from '../model/AxisModel'
+
+@Component
+export struct SmallAnimation {
+  @Link mainFlag: boolean
+  private point: Point = new Point(0, 0)
+  @State item: Item = new Item(0, $r('app.media.money1'), false)
+
+  build() {
+    Image(this.item.image)
+      .width('20%')
+      .height('20%')
+      .objectFit(ImageFit.Contain)
+      .translate(this.mainFlag ? { x: this.point.x, y: this.point.y } : { x: 0, y: 0 })
+      .rotate({ x: 0, y: 0, z: 1, angle: this.item.clicked ? 360 : 90 })
+      .scale(this.item.clicked ? { x: 1.25, y: 1.25 } : { x: 1, y: 1 })
+      .opacity(this.item.clicked ? 0.6 : 1)
+      .onClick(() => {
+        this.item.clicked = !this.item.clicked
+      })
+      .animation(
+        {
+          delay: 10,
+          duration: 300,
+          iterations: 1,
+          curve: Curve.Smooth,
+          playMode: PlayMode.Normal
+        }
+      )
+  }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/StackButton.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/StackButton.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c8e22362b978a7d639b195c8c99cb93405c17771
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/StackButton.ets
@@ -0,0 +1,132 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Item } from '../model/Item'
+import { Point, AxisModel } from '../model/AxisModel'
+import { SmallAnimation } from '../common/SmallAnimation'
+
+const IMAGE_RESOURCE: Resource[] = [
+  $r('app.media.money1'),
+  $r('app.media.money2'),
+  $r('app.media.money3'),
+  $r('app.media.money4'),
+  $r('app.media.money5'),
+  $r('app.media.money6'),
+  $r('app.media.money7'),
+  $r('app.media.money8')
+]
+
+@Component
+export struct StackButton {
+  @State mainFlag: boolean = false
+  @State imagerArr: Array<Item> = []
+  @State @Watch('onQuantityChange') quantity: number = 3
+  private axis: AxisModel = new AxisModel(175, this.quantity)
+
+  onQuantityChange() {
+    this.imagerArr = []
+    for (let i = 0; i < this.quantity; i++) {
+      this.imagerArr.push(new Item(i, IMAGE_RESOURCE[i], false))
+    }
+    this.axis = new AxisModel(175, this.quantity)
+  }
+
+  aboutToAppear() {
+    this.onQuantityChange()
+  }
+
+  add() {
+    if (this.quantity >= 3 && this.quantity < 8) {
+      this.quantity += 1
+    } else if (this.quantity >= 8) {
+      this.quantity = 8
+    }
+  }
+
+  reduce() {
+    if (this.quantity > 3 && this.quantity <= 8) {
+      this.quantity -= 1
+    } else if (this.quantity <= 3) {
+      this.quantity = 3
+    }
+  }
+
+  reset() {
+    for (let i = 0; i < this.quantity; i++) {
+      if (this.imagerArr[i].clicked) {
+        this.imagerArr[i].clicked = false
+      }
+    }
+  }
+
+  animate() {
+    animateTo(
+      {
+        delay: 10,
+        tempo: 0.68,
+        iterations: 1,
+        duration: 500,
+        curve: Curve.Smooth,
+        playMode: PlayMode.Normal
+      }, () => {
+      this.mainFlag = !this.mainFlag
+    })
+  }
+
+  build() {
+    Column() {
+      Stack() {
+        ForEach(this.imagerArr, (item: Item, index: number) => {
+          SmallAnimation({ item: item, point: this.axis.points[item.index], mainFlag: $mainFlag })
+        }, item => JSON.stringify(item))
+
+        Image(this.mainFlag ? $r('app.media.image1') : $r('app.media.image2'))
+          .width('35%')
+          .height('35%')
+          .objectFit(ImageFit.Contain)
+          .scale({ x: this.mainFlag ? 0.75 : 1, y: this.mainFlag ? 0.75 : 1 })
+          .onClick(() => {
+            this.reset()
+            this.animate()
+          })
+      }
+      .rotate({ x: 0, y: 0, z: 1, angle: this.mainFlag ? 360 : 90 })
+      .width('100%')
+      .height('80%')
+      .layoutWeight(1)
+      .margin({ top: '8%' })
+
+      Row() {
+        Image($r('app.media.add'))
+          .objectFit(ImageFit.Contain)
+          .width('20%')
+          .height('95%')
+          .margin({ top: 5, right: '10%' })
+          .onClick(() => {
+            this.add()
+          })
+        Image($r('app.media.reduce'))
+          .objectFit(ImageFit.Contain)
+          .width('20%')
+          .height('95%')
+          .margin({ top: 5, left: '10%' })
+          .onClick(() => {
+            this.reduce()
+          })
+      }
+      .height('10%')
+    }
+  }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/AxisModel.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/AxisModel.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e105cefe2cd36f33dfed567ae72e55fb9ae41697
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/AxisModel.ets
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class Point {
+  public x: number = 0
+  public y: number = 0
+
+  constructor(x: number, y: number) {
+    this.x = x
+    this.y = y
+  }
+}
+
+export class AxisModel {
+  private radius: number
+  private num: number
+  public points: Point[] = []
+
+  constructor(radius: number, num: number) {
+    this.radius = radius
+    this.num = num
+    this.points = []
+    this.Init(this.radius, this.num)
+  }
+
+  Init(radius, num) {
+    if (num <= 0) {
+      return
+    }
+    for (let i = 0; i <= num; i++) {
+      let x = this.radius * Math.cos(2 * Math.PI * i / num)
+      let y = this.radius * Math.sin(2 * Math.PI * i / num)
+      this.points.push(new Point(x, y))
+    }
+  }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/Item.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/Item.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b3b5d9a96c49b10d695e129bd16ccdb2425318de
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/Item.ets
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class Item {
+  index: number = 0
+  clicked: boolean = false
+  image: Resource = $r('app.media.money1')
+
+  constructor(index: number, image: Resource, clicked: boolean) {
+    this.index = index
+    this.image = image
+    this.clicked = clicked
+  }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/pages/Index.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f0a187360af81f4b3de93bff5d559e1721e17313
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/pages/Index.ets
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { StackButton } from '../common/StackButton'
+
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      Row() {
+        Text($r('app.string.entry_MainAbility'))
+          .fontSize(20)
+          .fontColor(Color.White)
+          .textAlign(TextAlign.Center)
+      }
+      .height('6%')
+      .width('100%')
+      .padding({ left: 15 })
+      .backgroundColor('#0D9FFB')
+
+      StackButton()
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/element/string.json b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..70b973b0785ff87f097b578431fdb8193c97560f
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "Animation"
+    },
+    {
+      "name": "description_mainability",
+      "value": "eTS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/add.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..01b08d6f20e0c0ba10b9aaf5e7e8ef202dcb102f
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/add.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/icon.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/icon.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image1.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image1.png
new file mode 100644
index 0000000000000000000000000000000000000000..365ab223c4da6cd599de94fc6ad0717230c0af94
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image1.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image2.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image2.png
new file mode 100644
index 0000000000000000000000000000000000000000..83efc92c1fd7f66347b93c3c784adc10168930c7
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image2.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money1.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money1.png
new file mode 100644
index 0000000000000000000000000000000000000000..56819da5afbf8b79e10d5a6110aec2da2f6aaf19
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money1.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money2.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money2.png
new file mode 100644
index 0000000000000000000000000000000000000000..71b5c6f244cb643410d225fe03b357e72cfcfb68
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money2.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money3.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money3.png
new file mode 100644
index 0000000000000000000000000000000000000000..70e0df4f29719528026b24f315edfd3cf8d89399
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money3.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money4.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money4.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f47a017d498d76b983a79719c8c45100a23a529
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money4.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money5.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money5.png
new file mode 100644
index 0000000000000000000000000000000000000000..3721211d081ab638ab1bdbae82d12ae89fe9611f
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money5.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money6.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money6.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e1bff73eef6265bbc2e4427c490638cfb1636a6
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money6.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money7.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money7.png
new file mode 100644
index 0000000000000000000000000000000000000000..0bf837c1acc7233d18c90fd90ef427769f9cb6f0
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money7.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money8.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money8.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8eb80ddc94a58d4972e98b5ddd4022242776dfa
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money8.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/reduce.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/reduce.png
new file mode 100644
index 0000000000000000000000000000000000000000..cdc77b71bf6748920a8b38cec8e751d8fdb69def
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/reduce.png differ
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/en/element/string.json b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/en/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..70b973b0785ff87f097b578431fdb8193c97560f
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/en/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "Animation"
+    },
+    {
+      "name": "description_mainability",
+      "value": "eTS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/zh/element/string.json b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/zh/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..e25b2adff8fa2b599e95cd95103e918a0a81af78
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/zh/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "动画"
+    },
+    {
+      "name": "description_mainability",
+      "value": "eTS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/hvigorfile.js b/ETSUI/eTSArkUIAnimation/hvigorfile.js
new file mode 100644
index 0000000000000000000000000000000000000000..cff9f0dfcf8cb00cca34e7f50d61380cf5496868
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/hvigorfile.js
@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').legacyAppTasks
\ No newline at end of file
diff --git a/ETSUI/eTSArkUIAnimation/package.json b/ETSUI/eTSArkUIAnimation/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..f356bb9332b35d74f9bc1e6c8157239246f93908
--- /dev/null
+++ b/ETSUI/eTSArkUIAnimation/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "etsarkuianimation",
+  "version": "1.0.0",
+  "ohos": {
+    "org": "huawei",
+    "buildTool": "hvigor",
+    "directoryLevel": "project"
+  },
+  "description": "example description",
+  "repository": {},
+  "license": "ISC",
+  "dependencies": {
+    "hypium": "^1.0.0",
+    "@ohos/hvigor": "1.0.6",
+    "@ohos/hvigor-ohos-plugin": "1.0.6"
+  }
+}
diff --git a/ETSUI/eTSArkUIAnimation/screenhots/devices/Animation.png b/ETSUI/eTSArkUIAnimation/screenhots/devices/Animation.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3a0c68b4e8c32ad032dc859f9f87b2a17cc4b14
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/screenhots/devices/Animation.png differ
diff --git a/ETSUI/eTSArkUIAnimation/screenhots/devices/main.png b/ETSUI/eTSArkUIAnimation/screenhots/devices/main.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd8f0d07c3fa8d8beba06b686130db74bc629e1b
Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/screenhots/devices/main.png differ
diff --git a/ETSUI/eTSBuildCommonView(API8)/README_zh.md b/ETSUI/eTSBuildCommonView(API8)/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..a4295c987485eb9cf9ccaf3dbbbacae277e3f161
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/README_zh.md
@@ -0,0 +1,15 @@
+# 创建简单视图
+
+## 简介
+
+本示例通过展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。详情参考《ArkUI-声明式范式开发指南》第三章。
+
+## 使用说明
+
+此页面为静态页面，无用户交互。
+
+## 约束与限制
+
+1.本示例仅支持在标准系统上运行。
+
+2.本示例需要使用3.0.0.961及以上的DevEco Studio版本才可编译运行。
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/build-profile.json5 b/ETSUI/eTSBuildCommonView(API8)/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..3854f71fc436e7d67fb03828698562f4dc8a3abb
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/build-profile.json5
@@ -0,0 +1,27 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "compileSdkVersion": 8,
+    "compatibleSdkVersion": 8,
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "entry",
+      "srcPath": "./entry",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/build-profile.json5 b/ETSUI/eTSBuildCommonView(API8)/entry/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..ae58d1d0a70c602c9cfe1909b00dfec899ba1944
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/entry/build-profile.json5
@@ -0,0 +1,13 @@
+{
+  "apiType": 'faMode',
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default",
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/hvigorfile.js b/ETSUI/eTSBuildCommonView(API8)/entry/hvigorfile.js
new file mode 100644
index 0000000000000000000000000000000000000000..bcec4c99653062cbf17702c40a2dd2a7b809b81a
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/entry/hvigorfile.js
@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').legacyHapTasks
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/package.json b/ETSUI/eTSBuildCommonView(API8)/entry/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..c7685ac4e7c0d79df04c96744f0d8f22cb4a9025
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/entry/package.json
@@ -0,0 +1,14 @@
+{
+	"license": "ISC",
+	"devDependencies": {},
+	"name": "entry",
+	"ohos": {
+		"org": "huawei",
+		"directoryLevel": "module",
+		"buildTool": "hvigor"
+	},
+	"description": "example description",
+	"repository": {},
+	"version": "1.0.0",
+	"dependencies": {}
+}
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/src/main/config.json b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..ea999820426807a278510854e28dc2ee5bd83e0d
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/config.json
@@ -0,0 +1,66 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.etsbuildcommonview",
+    "vendor": "example",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.etsbuildcommonview",
+    "name": ".MyApplication",
+    "mainAbility": ".MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "visible": true,
+        "srcPath": "MainAbility",
+        "name": ".MainAbility",
+        "srcLanguage": "ets",
+        "icon": "$media:Logo",
+        "description": "$string:mainability_description",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "mode": {
+          "syntax": "ets",
+          "type": "pageAbility"
+        },
+        "pages": [
+          "pages/FoodDetail"
+        ],
+        "name": ".MainAbility",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/src/main/ets/MainAbility/app.ets b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/ets/MainAbility/app.ets
new file mode 100644
index 0000000000000000000000000000000000000000..bf28e58b36cf11db491d3f00768ef2c9e41d05cf
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/ets/MainAbility/app.ets
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+  onCreate() {
+    console.info('Application onCreate')
+  },
+  onDestroy() {
+    console.info('Application onDestroy')
+  },
+}
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/src/main/ets/MainAbility/pages/FoodDetail.ets b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/ets/MainAbility/pages/FoodDetail.ets
new file mode 100644
index 0000000000000000000000000000000000000000..10a5ba48614cf0b239fe287040cb0883293f7cfa
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/ets/MainAbility/pages/FoodDetail.ets
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Component
+struct FoodImageDisplay {
+  build() {
+    Stack({ alignContent: Alignment.BottomStart }) {
+      Image($r('app.media.Tomato'))
+        .objectFit(ImageFit.Contain)
+      Text('Tomato')
+        .fontSize(26)
+        .fontWeight(500)
+        .margin({ left: 26, bottom: 17.4 })
+    }
+    .backgroundColor('#FFedf2f5')
+    .height(357)
+  }
+}
+
+@Component
+struct ContentTable {
+  @Builder IngredientItem(title:string, name: string, value: string) {
+    Flex() {
+      Text(title)
+        .fontSize(17.4)
+        .fontWeight(FontWeight.Bold)
+        .layoutWeight(1)
+      Flex({ alignItems: ItemAlign.Center }) {
+        Text(name)
+          .fontSize(17.4)
+          .flexGrow(1)
+        Text(value)
+          .fontSize(17.4)
+      }
+      .layoutWeight(2)
+    }
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
+      this.IngredientItem('Calories', 'Calories', '17kcal')
+      this.IngredientItem('Nutrition', 'Protein', '0.9g')
+      this.IngredientItem(' ', 'Fat', '0.2g')
+      this.IngredientItem(' ', 'Carbohydrates', '3.9g')
+      this.IngredientItem(' ', 'VitaminC', '17.8mg')
+    }
+    .padding({ top: 20, right: 20, left: 20 })
+    .height(250)
+  }
+}
+
+@Entry
+@Component
+struct FoodDetail {
+  build() {
+    Column() {
+      FoodImageDisplay()
+      ContentTable()
+    }
+    .alignItems(HorizontalAlign.Center)
+  }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/base/element/string.json b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..3440475e7cbd0420317843d6131c278bd48a8ece
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "Healthy Diet"
+    },
+    {
+      "name": "mainability_description",
+      "value": "ETS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/base/media/Logo.png b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/base/media/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..826c9813215ecaef36f1900b9ad37c93598181c2
Binary files /dev/null and b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/base/media/Logo.png differ
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/phone/media/Tomato.png b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/phone/media/Tomato.png
new file mode 100644
index 0000000000000000000000000000000000000000..93ad983d4862485684c34cfcf1632569a13ae5a1
Binary files /dev/null and b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/phone/media/Tomato.png differ
diff --git a/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/rawfile/Tomato.png b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/rawfile/Tomato.png
new file mode 100644
index 0000000000000000000000000000000000000000..93ad983d4862485684c34cfcf1632569a13ae5a1
Binary files /dev/null and b/ETSUI/eTSBuildCommonView(API8)/entry/src/main/resources/rawfile/Tomato.png differ
diff --git a/ETSUI/eTSBuildCommonView(API8)/hvigorfile.js b/ETSUI/eTSBuildCommonView(API8)/hvigorfile.js
new file mode 100644
index 0000000000000000000000000000000000000000..cff9f0dfcf8cb00cca34e7f50d61380cf5496868
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/hvigorfile.js
@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').legacyAppTasks
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/package.json b/ETSUI/eTSBuildCommonView(API8)/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..305ba79ea2afd4e4da7d67ed3c85408cd0d932aa
--- /dev/null
+++ b/ETSUI/eTSBuildCommonView(API8)/package.json
@@ -0,0 +1,18 @@
+{
+	"license":"ISC",
+	"devDependencies":{},
+	"name":"buildcommonview",
+	"ohos":{
+		"org":"huawei",
+		"directoryLevel":"project",
+		"buildTool":"hvigor"
+	},
+	"description":"example description",
+	"repository":{},
+	"version":"1.0.0",
+	"dependencies":{
+		"@ohos/hvigor-ohos-plugin":"1.0.6",
+		"hypium":"^1.0.0",
+		"@ohos/hvigor":"1.0.6"
+	}
+}
\ No newline at end of file
diff --git a/ETSUI/eTSBuildCommonView(API8)/screenshots/device/FoodDetail.png b/ETSUI/eTSBuildCommonView(API8)/screenshots/device/FoodDetail.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cf129c3c8742e4dec04d5ccb107aeb5a90483d1
Binary files /dev/null and b/ETSUI/eTSBuildCommonView(API8)/screenshots/device/FoodDetail.png differ