Merge remote-tracking branch 'origin/main'

docs/content/basic/animation.md

@@ -4,6 +4,7 @@ title: Property Animation
 
 <script setup lang="ts">
 import { default as DemoDiscolorate } from './demos/animation/discolorate.vue'
+import { default as DemoFadeIn} from './demos/animation/fadeIn.vue'
 </script>
 
 # Animation
@@ -67,6 +68,7 @@ new Circle(100)
     )
   )
 ```
+<DemoFadeIn/>
 
 ## change property
 

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

@@ -3,38 +3,35 @@ 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')
+
+async function create_app() {
+  const engine = await new nc.CarEngine().init('https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm')
+  const app = engine.createApp(canvas.value!).setBackgroundColor('transparent')
+  return app
+}
+
+const app = create_app()
 
 onMounted(async () => {
-  const root = new nc.Circle(100,{
-    x:100,
-    y:100
+  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') })
+    .animate(
+      nc.parallel(
+        nc.create().withAttr({ duration: 1 }),
+        // nc.discolorate().withAttr({ duration: 1, to: nc.Color.fromName('skyblue') })
+      )
     )
-  )
   const scene = nc.createScene(root)
-  app.checkout(scene)
-  
+    ; (await app).checkout(scene)
 })
-function play(){
-  app.play()
+async function play() {
+  (await 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>
+  <button @click="play()">run</button>
+  <canvas ref="canvas" width="200" height="300"></canvas>
+</template>

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

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

docs/content/zh/basic/preload.md

@@ -0,0 +1,33 @@
+---
+title: 资源预加载
+---
+
+# 资源预加载
+
+资源预加载是一个非常关键的概念，主要用于提前加载动画所需要的静态资源。预加载的资源均可以在全局变量 `$source` 中找到.
+
+## 字体预加载
+
+```javascript
+await useFont(url)
+```
+
+在这，`url` 表示字体文件的位置，并将返回一个 `ArrayBuffer` 对象。之后，您可以在 `Text` 中使用它：
+
+```javascript
+root.add(new Text('Hello Newcar'))
+```
+
+但是由于 CanvasKit-WASM 不支持 CSS 字体，因此您需要自己准备字体文件。
+
+## 图片预加载
+
+```javascript
+const image = await useImage(url)
+```
+
+然后，您可以在 `ImageWidget`中使用它：
+
+```javascript
+root.add(new ImageWidget(image))
+```