docs: update

docs/content/basic/animation.md

@@ -2,7 +2,7 @@
 title: Property Animation
 ---
 
-# Property Animation
+# Animation
 
 The underlying principle of newcar animations is to continuously change an attribute of an object in each frame. In the quick start, you've already mastered the basic use of newcar animations. Now let's delve into more detail.
 
@@ -15,35 +15,84 @@ How do you define an animation? We have previously learned about the built-in an
 - scale
 - zoomIn
 - zoomOut
-- transparency
 - fadeIn
 - fadeOut
 - ...
 
-However, it's not possible for these animations to cover all properties and styles of a `Widget`. In the ancient versions of newcar, we wrote a corresponding animation for each property, which resulted in an incredibly large bundle size after packaging. This was a loss that was not worth the gain. The new version of newcar uses the `changeProperty` API and `changeStyle` API to change the attributes or values of objects. `changeProperty` and `changeStyle` are used in the same way, the difference is that one changes properties and the other changes the object's style.
+In the followings, I'll take you getting into the animation system and have a deeper understanding.
 
-```javascript
-widget.animate(changeProperty('x', 0, 100))
-// Or
-widget.animate(changeProperty('x'), {
-  from: 0,
-  to: 120
-})
+## Animating 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
+
+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:
+
+```ts
+new Circle(100)
+  .animate(delay(3))
+  .animate(create().withAttr({ duration: 1 }))
+```
+
+## Sync Animating
+
+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:
+
+```ts
+new Circle(100)
+  .animate(
+    parallel(
+      create().withAttr({ duration: 1 }),
+      discolorate().withAttr({ duration: 1, to: Color.parse('skyblue') })
+    )
+  )
 ```
 
-`changeProperty` and `changeStyle` can also change multiple values at the same time
+In addition, if you want to insert step-by-step animation, you can use `sequence` to make it.
 
-```javascript
-widget.animate(changeProperty(['x', 'y'], [0, 0], [100, 200]))
-// Or
-widget.animate(changeProperty('x'), {
-  from: [0, 0],
-  to: [100, 200]
-})
+```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') })
+    )
+  )
 ```
 
-The fourth parameter of `animate` can include a `by` field, which is used to set the easing curve of the animation.
+## change property
 
-The Newcar standard library provides a variety of easing curves, all starting with `ease`, and you can choose by using code hints or by viewing the function's graph.
+Newcar offers a variety of animations that could be used, but it can't cover all the attributes, so `changeProperty` api is your best choice.
+
+Usage:
+
+```ts
+circle.animate(
+  changeProperty((w) => w.radius).withAttr({
+    duration: 1,
+    from: 100,
+    to: 300
+  })
+)
+```
+
+## Easing Functions
+
+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:
+
+```ts
+circle.animate(
+  create.withAttr({
+    duration: 1,
+    by: easeBounce
+  })
+)
+```
 
 Easing curve graph address: [https://www.desmos.com/calculator/yasltaa9um](https://www.desmos.com/calculator/yasltaa9um)