Merge remote-tracking branch 'origin/main'

docs/content/basic/animation.md

@@ -2,6 +2,10 @@
 title: Property Animation
 ---
 
+<script setup lang="ts">
+import { default as DemoDiscolorate } from './demos/animation/discolorate.vue'
+</script>
+
 # 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.
@@ -48,7 +52,7 @@ new Circle(100)
  )
  )
 ```
-
+<DemoDiscolorate/>
 In addition, if you want to insert step-by-step animation, you can use `sequence` to make it.
 
 ```ts

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

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

docs/content/zh/basic/color-system.md

@@ -4,7 +4,7 @@ title: 颜色系统
 
 # 颜色系统
 
-Newcar 中的 Widget 对象可以设置为你喜欢的任何颜色，这些颜色由 `Color` 对象管理。目前，有三种设置颜色的方法，并且在未来的版本中，我们将引入渐变和其他颜色特性。
+Newcar 中的 Widget 对象可以设置为你喜欢的任何颜色，这些颜色由 `Color` 对象管理。目前为止，有三种设置颜色的方法，并且在未来的版本中，我们将引入渐变和其他颜色特性。
 
 ## 直接引用
 

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

@@ -4,7 +4,7 @@ title: 父子组件
 
 # 父子组件
 
-在 `newcar` ，可以使用 `children` 属性嵌套对象。添加方法如下：
+在 `newcar` ，可以使用 `children` 属性嵌套组件。添加方法如下：
 
 ```javascript
 const child = new $.Circle(200, {
@@ -21,12 +21,12 @@ const father = new $.Circle(300, {
 father.add(child)
 ```
 
-在本例中， `child` 的坐标 `（200， 300）` 不是相对于画布的左上角，而是相对于其父组件的位置。
+在本例中， `child` 的坐标 `（200， 300）` 不是相对于画布的左上角，而是基于其父组件的相对位置。
 
 :::tip
 此外，父子组件遵循 **“子跟随父，父不跟随子”** 的原则。这意味着，当父组件移动时，子组件也会随之移动。当子组件移动时，父组件将保持静止。
 
-使用此功能，您可以设置背景并使场景中的对象成为背景的 `“子对象”` ，这样当您操纵角色的移动时，背景会向后移动。
+使用此功能，您可以设置背景并使场景中的对象成为背景的 `“子对象”` ，这样当您操纵组件的移动时，背景会向后移动。
 :::
 
 :::info

docs/content/zh/basic/recorder.md

@@ -0,0 +1,20 @@
+---
+title: 录制器
+---
+
+# Recorder
+
+到目前为止，经过前面的学习，我相信您已经掌握了Newcar的基本用法。目前，如果您想向朋友展示你制作的动画或将其上传到社交媒体上，屏幕录制是一个不错的选择。但是，我们建议使用 `录制器` 来记录您的动画并以 `mp4` 或`webm`格式导出视频。
+
+```javascript
+// First, create a Recorder, specifying the Canvas Element type
+const recorder = new Recorder(document.querySelector('#canvas'), 'mp4')
+
+// Start recording
+recorder.start(2000, (url) => {
+ // After 2000ms, output the video's URL address
+ console.log(url)
+})
+```
+
+现在，您可以访问这个URL来下载视频。

docs/content/zh/basic/setup.md

@@ -4,11 +4,11 @@ title: Setup 语法
 
 # Setup 语法
 
-你有没有觉得使用Newcar来创建动画太麻烦了?在1.0.0-beta版本之后,我们添加了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` 实例.
+首先, 我们需要调用 `Widget.setup()` 方法并传入一个 [生成器函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#generator_functions), 这将是逻辑代码的入口点。第一个参数是 `组件` 实例.
 
 ```ts
 import * as nc from 'newcar'
@@ -24,7 +24,7 @@ new Widget({
 
 ## 暂停
 
-当我们想要将动画暂停几秒，几毫秒或几帧时，我们可以使用 `yield` 关键字来返回一个数字。
+当我们想要将动画暂停几秒、 几毫秒或几帧时， 我们可以使用 `yield` 关键字。
 
 ```ts
 import * as nc from 'newcar'
@@ -41,7 +41,7 @@ new Widget({
 
 ## 动画
 
-我们如何插入动画？只需产出你想要动画化的内容。
+我们如何插入动画？ 只需在 `yield` 关键字后面写上需要的动画。
 
 ```ts
 import * as nc from 'newcar'

docs/content/zh/basic/unit.md

@@ -0,0 +1,15 @@
+---
+title: 单位制
+---
+
+# 单位制
+
+Newcar 提供了三种单位制：`帧`、`秒` 和 `毫秒`。默认单位通常是秒，与应用程序绑定，除了 [Recorder](./recorder) 使用毫秒。
+
+## 设置单位制
+
+```ts
+app.config.unit = 'frame'
+app.config.unit = 's'
+app.config.unit = 'ms'
+```