欢迎来到 Newcar 动画引擎的初学者指南！在这里，你将学习到关于 Newcar 的一些基本概念和知识，包括：

  • CarEngine（CarEngine）
  • App（应用程序）
  • Scene（场景）
  • Widget（组件）
  • Animation（动画）

这些概念将在未来的文档中详细解释。本指南将简要介绍 Newcar 动画引擎的基本用法，让你快速掌握 Newcar 的开发理念。不再赘述，让我们开始吧！

创建一个 Newcar 项目

“要做好工作，工匠需要最好的工具。”

首先，你需要准备以下工具：

  • Node.js
  • NPM/PNPM/YARN
  • 一个现代的代码编辑器，比如 VSCode、Webstorm 等
  • 一个支持 WebAssembly 编译的浏览器，这里我们推荐最新版本的 Firefox、Chrome、Edge

我们推荐使用 PNPM 和 Vite 来创建我们的项目。为了演示，我们将使用一个 Vanilla（纯素）环境，但你也可以选择你喜欢的框架。

在 shell 中运行：

  1. $ pnpm create vite my-newcar-project
  2. $ cd my-newcar-project
  3. $ pnpm install

接下来，我们需要安装两个东西：Newcar 本身和 CanvasKit-WASM。

在 shell 中运行：

  1. $ pnpm add newcar
  2. $ pnpm add canvaskit-wasm

我们可以看到 Vite 已经自动在 index.html 中包含了 main.ts。让我们清空 main.ts 中的所有内容，并在 index.html 的 <body> 部分添加一个 <canvas> 标签。

在 html 中添加：

  1. <canvas width="1600" height="900" id="canvas"></canvas>

然后，在 main.ts 中添加以下代码。

在 typescript 中添加：

  1. import * as nc from "newcar";
  3. const engine = await new nc.CarEngine().init("../node_modules/canvaskit-wasm/bin/canvaskit.wasm");

在上面的代码中，我们导入了 newcar 并将其命名为 nc。然后我们创建了一个 CarEngine 对象并传入了我们刚刚安装的 CanvasKit-WASM 文件。

创建一个动画应用程序

在 typescript 中添加：

  1. import * as nc from "newcar";
  3. const engine = await new nc.CarEngine().init("../node_modules/canvaskit-wasm/bin/canvaskit.wasm");
  5. const app = engine.createApp(document.querySelector("#canvas"));

我们使用 CarEngine.createApp 创建了一个动画实例并传入了 <canvas> 的 DOM 对象。

创建一个场景并添加对象

在 typescript 中添加：

  1. import * as nc from "newcar";
  3. const engine = await new nc.CarEngine().init("../node_modules/canvaskit-wasm/bin/canvaskit.wasm");
  4. const app = engine.createApp(document.querySelector("#canvas"));
  5. const root = new nc.Circle(100);
  6. const scene = new nc.Scene(root);
  7. app.checkout(scene);
  8. app.play();

首先，我们创建了一个根，这是一个 Widget 子类 Circle。这个子类的构造函数的第一个参数是圆的半径，我们将其设置为 100。

接下来，我们创建了一个 Scene 对象并将 root 设置为这个场景的根组件。一个场景只能有一个根组件，但一个根组件可以有多个子组件，这些子组件也可以有自己的子组件，从而形成一个场景的树状结构。最后，我们使用 App.checkout 方法切换到这个场景，并使用 App.play 方法播放动画。

如果一切正确，你应该能在画布上看到一个半径为 100 的白色圆圈。

添加动画

在 typescript 中添加：

  1. root.animate(nc.create, 0, 30);

这个方法将为这个根组件添加一个名为 create 的动画，并将动画设置在第 0 个时间单位开始。

恭喜！你现在已经理解了 Newcar 动画引擎的基本用法。接下来我们将详细解释每个概念。如果你喜欢我们的项目，欢迎加入我们并贡献代码，或者在 GitHub 上给我们一个免费的 Star。