From d13c4db6e3e96d7f7d7911855861f6bf9e347024 Mon Sep 17 00:00:00 2001
From: sujiaqi <1526394815@qq.com>
Date: Mon, 29 Jul 2024 15:31:40 +0800
Subject: [PATCH] docs:update animation_zh

---
 docs/content/.vitepress/zh.mts           |  2 +-
 docs/content/basic/animation.md          | 10 +--
 docs/content/basic/getting-started.md    |  2 +-
 docs/content/zh/basic/animation.md       | 98 ++++++++++++++++++++++++
 docs/content/zh/basic/getting-started.md |  2 +-
 5 files changed, 106 insertions(+), 8 deletions(-)
 create mode 100644 docs/content/zh/basic/animation.md

diff --git a/docs/content/.vitepress/zh.mts b/docs/content/.vitepress/zh.mts
index 1d853ad6b..2d351f5a8 100644
--- a/docs/content/.vitepress/zh.mts
+++ b/docs/content/.vitepress/zh.mts
@@ -79,7 +79,7 @@ export const zhConfig = defineConfig({
             },
             {
               text: '属性动画',
-              link: '/zh/basic/property-animation',
+              link: '/zh/basic/animation',
             },
             {
               text: '父子组件',
diff --git a/docs/content/basic/animation.md b/docs/content/basic/animation.md
index f70e8ad17..e024250c5 100644
--- a/docs/content/basic/animation.md
+++ b/docs/content/basic/animation.md
@@ -21,9 +21,9 @@ How do you define an animation? We have previously learned about the built-in an
 
 In the followings, I'll take you getting into the animation system and have a deeper understanding.
 
-## Animating Step by Step
+## Animation Step by Step
 
-When you called the `Widget.animate` function, it will push your animation into a "Waiting Array", and it will run these animations that you animated step bu step
+When you called the `Widget.animate` function, it will push your animation into a `Waiting Array` , and it will run these animations that you animated step by step
 
 The most simple animation is `delay`, it's like its name - to do nothing in some time unit. For example, if you want to wait 3s and run `create` animation, you can code like followings:
 
@@ -33,11 +33,11 @@ new Circle(100)
   .animate(create().withAttr({ duration: 1 }))
 ```
 
-## Sync Animating
+## Sync Animation
 
 If you want to run two or more animations in same timeline, you can use `parallel()` to make it. The function allow you input two and more animations, and run them together.
 
-For instance, if you want to let a circle run `create` animation with discolorating, you can:
+For instance, if you want to let a circle run `create` animation with discoloring, you can:
 
 ```ts
 new Circle(100)
@@ -84,7 +84,7 @@ circle.animate(
 
 In Newcar, some functions is spelled with "ease" at the begin, it can control your animation's speed action, we called them `TimingFunction`
 
-you can use `by` parameter to receive a timing fuction:
+you can use `by` parameter to receive a timing function:
 
 ```ts
 circle.animate(
diff --git a/docs/content/basic/getting-started.md b/docs/content/basic/getting-started.md
index 028e22934..ec7878e7c 100644
--- a/docs/content/basic/getting-started.md
+++ b/docs/content/basic/getting-started.md
@@ -57,7 +57,7 @@ $ npm install
 
 ### Vite CLI
 
-We recommend using [PNPM + Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to create our project.
+We recommend using [PNPM + Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to create your project.
 
 ```shell
 $ pnpm create vite my-newcar-project
diff --git a/docs/content/zh/basic/animation.md b/docs/content/zh/basic/animation.md
new file mode 100644
index 000000000..2323476bc
--- /dev/null
+++ b/docs/content/zh/basic/animation.md
@@ -0,0 +1,98 @@
+---
+title: 属性动画
+---
+
+# 动画
+
+newcar 动画的基本原理是在每一帧中不断改变对象的属性。在快速入门中，您已经掌握了 newcar 动画的基本用法。现在让我们深入研究更多细节。
+
+我们都支持哪些动画？我们之前已经了解了内置动画 `create`，除此之外，newcar 还有许多其他内置动画。以下是常用动画的列表：
+
+- create
+- destroy
+- rotate
+- move
+- scale
+- zoomIn
+- zoomOut
+- fadeIn
+- fadeOut
+- ...
+
+在接下来的内容中，我将带您深入了解动画系统。
+
+## 步进动画
+
+当您调用 `Widget.animate` 函数时，它会将您的动画推入一个 `等待数组`，然后逐步运行所创建的动画。
+
+最简单的动画是 `延迟`，就像它的名字一样-在某个时间单位内什么都不做。例如，如果您想等待3秒然后运行 `创建` 动画，您可以编写如下代码：
+
+```ts
+new Circle(100)
+  .animate(delay(3))
+  .animate(create().withAttr({ duration: 1 }))
+```
+
+## 同步动画
+
+如果您想在同一时间轴上同时运行两个以上动画，您可以使用 `parallel()` 来实现。该函数允许您输入两个以上动画，并同时运行它们。
+
+例如，如果您想让一个圆形运行 `创建` 动画并且变色，您可以：
+
+```ts
+new Circle(100)
+  .animate(
+    parallel(
+      create().withAttr({ duration: 1 }),
+      discolorate().withAttr({ duration: 1, to: Color.parse('skyblue') })
+    )
+  )
+```
+
+如果您想插入逐步动画，可以使用 `sequence` 来制作。
+
+```ts
+new Circle(100)
+  .animate(
+    parallel(
+      sequence(
+        create().withAttr({ duration: 0.5 }),
+        fadeIn().withAttr({ duration: 0.5 })
+      ),
+      discolorate().withAttr({ duration: 1, to: Color.parse('skyblue') })
+    )
+  )
+```
+
+## 更改属性
+
+尽管newcar提供了各种可以使用的动画，但它仍旧无法涵盖所有属性，因此 `changeProperty` API是您的最佳选择。
+
+用法:
+
+```ts
+circle.animate(
+  changeProperty((w) => w.radius).withAttr({
+    duration: 1,
+    from: 100,
+    to: 300
+  })
+)
+```
+
+## 缓动函数
+
+在Newcar中，一些功能以 `ease` 开头拼写，可以控制您的动画速度，我们称之为 `缓动`。
+
+请使用 `by` 参数来接收一个缓动函数。
+
+```ts
+circle.animate(
+  create.withAttr({
+    duration: 1,
+    by: easeBounce
+  })
+)
+```
+
+缓动函数的曲线图地址: [https://www.desmos.com/calculator/yasltaa9um](https://www.desmos.com/calculator/yasltaa9um)
diff --git a/docs/content/zh/basic/getting-started.md b/docs/content/zh/basic/getting-started.md
index d8c5a3899..8d01a9276 100644
--- a/docs/content/zh/basic/getting-started.md
+++ b/docs/content/zh/basic/getting-started.md
@@ -57,7 +57,7 @@ $ npm install
 
 ### Vite CLI
 
-我们推荐使用 [PNPM + Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) 来创建我们的项目。
+我们推荐使用 [PNPM + Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) 来创建你的项目。
 
 ```shell
 $ pnpm create vite my-newcar-project