Merge remote-tracking branch 'origin/main'

docs/content/basic/demos/animation/create.vue

@@ -0,0 +1,25 @@
+<template>
+  <canvas ref="canvas" width="200" height="300"></canvas>
+</template>
+
+<script setup lang="ts">
+import * as nc from 'newcar'
+import { onMounted, ref } from 'vue'
+
+const canvas = ref<HTMLCanvasElement>()
+
+onMounted(async () => {
+  const engine = await new nc.CarEngine().init('https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm')
+  const app = engine.createApp(canvas.value!).setBackgroundColor('transparent')
+  const root = new nc.Circle(100)
+  .animate(
+    nc.parallel(
+      nc.create().withAttr({ duration: 1 }),
+      nc.discolorate().withAttr({ duration: 1, to: Color.parse('skyblue') })
+    )
+  )
+  const scene = nc.createScene(root)
+  app.checkout(scene)
+  app.play()
+})
+</script>

docs/content/basic/getting-started.md

@@ -127,7 +127,6 @@ Finally, we used the `App.checkout` method to switch to this scene and the `App.
 
 If you setup the project correctly, you will see a white circle on the screen, just like this.
 <DemoCircle/>
-<demo src="./demos/getting-started/circle.vue"/>
 
 ## Adding Animation
 

docs/content/zh/basic/parents-children-widget.md

@@ -4,7 +4,7 @@ title: 父子组件
 
 # 父子组件
 
-In `newcar`, objects can be nested using the `children` property. Here's how to add them:
+在 `newcar` ，可以使用 `children` 属性嵌套对象。添加方法如下：
 
 ```javascript
 const child = new $.Circle(200, {
@@ -21,22 +21,22 @@ const father = new $.Circle(300, {
 father.add(child)
 ```
 
-In this case, the coordinates `(200, 300)` of `child` are not relative to the top-left corner of the canvas, but rather to the position of its parent component.
+在本例中， `child` 的坐标 `（200， 300）` 不是相对于画布的左上角，而是相对于其父组件的位置。
 
 :::tip
-In addition, parent-child components follow the principle of **"child follows parent, parent does not follow child"**. This means that when the parent component moves, the child component moves with it. When the child component moves, the parent component remains still.
+此外，父子组件遵循 **“子跟随父，父不跟随子”** 的原则。这意味着，当父组件移动时，子组件也会随之移动。当子组件移动时，父组件将保持静止。
 
-With this feature, you can set up a background and make objects in the scene "child objects" of the background, so that when you manipulate the character's movement, the background moves backwards.
+使用此功能，您可以设置背景并使场景中的对象成为背景的 `“子对象”` ，这样当您操纵角色的移动时，背景会向后移动。
 :::
 
 :::info
-Besides coordinates, **rotation angle** and **scaling ratio** also follow the parent-child component principle.
+除了坐标外，**旋转角度** 和 **缩放比例** 也遵循父子继承原则。
 
-> The rotation angle here refers to the rotation angle of the entire coordinate system relative to the parent component, not the rotation angle value of each component.
+> 这里的旋转角度是指整个坐标系相对于父分量的旋转角度，而不是每个分量的旋转角度值。
 
 :::
 
-However, storing objects in variables is both cumbersome and inefficient, so after version 0.7.0, we recommend using chain syntax:
+但是，在变量中存储对象既麻烦又效率低下，因此在 0.7.0 版本之后，我们建议使用链式语法：
 
 ```javascript
 const root = new Widget().add(new Circle(200).setUpdate((elapsed, widget) => {}))

docs/content/zh/basic/setup.md

@@ -0,0 +1,58 @@
+---
+title: Setup 语法
+---
+
+# Setup 语法
+
+你有没有觉得使用Newcar来创建动画太麻烦了?在1.0.0-beta版本之后,我们添加了Setup语法,为用户提供了更大的灵活性。 
+
+## 生成器函数
+
+首先, 我们需要调用 `Widget.setup()` 方法并传入一个 [生成器函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#generator_functions), 这将是逻辑代码的入口点。第一个参数是 `Widget` 实例.
+
+```ts
+import * as nc from 'newcar'
+
+new Widget({
+  x: 100,
+  y: 100
+}).setup(function* (widget) {
+  console.log(widget.x, widget.y)
+  // Output: 100 100
+})
+```
+
+## 暂停
+
+当我们想要将动画暂停几秒，几毫秒或几帧时，我们可以使用 `yield` 关键字来返回一个数字。
+
+```ts
+import * as nc from 'newcar'
+new Widget({
+  x: 100,
+  y: 100
+}).setup(function* (widget) {
+  yield 1 // Wait for 1 second
+  widget.x = 100
+  yield 3 // Wait for 3 seconds
+  widget.x = 200
+})
+```
+
+## 动画
+
+我们如何插入动画？只需产出你想要动画化的内容。
+
+```ts
+import * as nc from 'newcar'
+
+new Widget({
+  x: 100,
+  y: 100
+}).setup(function* (widget) {
+  yield 1
+  yield nc.create().withAttr({ duration: 1 })
+})
+```
+
+这段代码将在1秒后执行 `create` 动画。