Newcar is a highly configurable and advanced universal engine designed for rapid animation creation. It is suitable for a wide range of applications, including video clips, dynamic charts (planned for the future), and even 2D game development (also planned for the future).
Although Newcar can be used in various ways, we recommend using Vite for project creation and PNPM for package management.
$ pnpm create vite project-name
$ cd project-name
$ pnpm install
Next, select your preferred framework.
$ pnpm add newcar
You will also need to install CanvasKit-WASM. For quick setup, we recommend using the CDN version.
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()
init()
until CanvasKit is fully loaded.Scene
with a root widget as its first parameter.defaultScene
and play the animation.Simple, right? Let's dive deeper.
Now, let's add some excitement.
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()
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).animate(nc.create, 0, 30)),
)
These codes will add a create
animation to the Circle
object.
If everything is set up correctly, you will see a circle drawn on the canvas.
The documentation is available at newcar.js.org.
Copyright (c) 2022-present, BugDuck Team & Dromara Community
Note: Newcar is a open-source project which belong to Dromara Community and maintained by BugDuck Team. The members of BugDuck just join with a personal identity, BugDuck Team will always keep its independence
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。