阿超 > dromara-newcar

dromara-newcar

2024-04-18

前端

发上开出了蔷薇，袖底是风，足下是莲。——顾城

https://github.com/dromara/newcar

最近dromara新加入了一个前端项目newcar

Newcar 是一款高度可配置且先进的通用引擎，专为快速动画创建而设计。它适用于广泛的应用，包括视频剪辑、动态图表（未来计划），甚至 2D 游戏开发（也是未来计划）。

这个项目作者竟

然是09年的，我们快速开始

1
2
3
$ pnpm create vite project-name
$ cd project-name
$ pnpm install

引入依赖

1
$ pnpm add newcar

初始化

1
2
3
4
5
6
7
8
import * as nc from 'newcar'

const engine = await new nc.Engine().init(
  '../node_modules/canvaskit-wasm/bin/canvaskit.wasm',
)

const defaultScene = new nc.Scene(new Widget())
engine.createApp().checkout(defaultScene).play()

这里做了三步

  1. 等待 init() 直到 CanvasKit 完全加载。
  2. 创建一个 Scene ，并将根小部件作为其第一个参数。
  3. 查看 defaultScene 并播放动画。

我们再添加一个圆

1
2
3
4
5
const engine = await new nc.Engine().init(
  '../node_modules/canvaskit-wasm/bin/canvaskit.wasm',
)
const defaultScene = new nc.Scene(new Widget().add(new nc.Circle(100)))
engine.createApp().checkout(defaultScene).play()

对这个圆创建动画

1