同步操作将从 dromara/newcar 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Newcar is being refactored and rewrited, please refer to next to get latest process.
Newcar is a Highly configurable universal advanced engine, 2Born for creating animation rapidly. You can use it in a lot of jobs, such as the video clips, dynamic chart (In the future) and even 2D game development (Also in the future).
Install the newcar
with your preferred package manager:
npm install newcar
yarn add newcar
pnpm add newcar
We suggest to use Vite to build our animation, in there we use pnpm as a instance.
pnpm create vite
And then you can choose your favorite framework to build your program. As a demo, we use native environment.
To create a animation by Newcar, we firstly need a animation object --- Car
.
Via newcar
or createCar
to create a animation.
import { createCar, Scene } from "newcar";
const animation = createCar("#canvas");
Defining a <canvas>
tag and set the id to canvas
:
<canvas id="canvas" width="1600" height="900"></canvas>
Then, we need to choose CanvasKit-WASM's file, install CanvasKit-WASM and import config
to change settings:
pnpm add canvaskit-wasm@0.39.1
import { config } from "newcar";
config.canvaskitWasmFile = "../node_modules/canvaskit-wasm/bin/canvaskit.wasm";
And then, we are going to create a scene for the animation and check out to it.
const scene = new Scene();
animation.scene = scene;
The last step is that when the canvaskit was loaded play it:
animation.on("ready-to-play", () => {
animation.play();
});
Now, the animation has been ran, but there are no anything on the canvas, let it do something absorbing.
Newcar offers many objects so that you have more choice (We have basic lib and some offical mods, please refer to API Docs.) In this instance, we use Text
as a example.
import { createCar, Scene, Text } from "newcar";
// Omit the existing code here.
scene.add(
new Text("Hello world!", {
x: 100,
y: 100,
size: 50,
}),
);
If everything is okay, you will see a text object with "Hello world" appears on the canvas.
We use async function to control objects, the first paramter is itself, you can control its act.
The codes below these texts can wait 100 frames and change the text to "Hi world".
import { createCar, Scene, Text, sleep } from "newcar";
// Omit the existing code here.
const scene = new $.Scene().add(
new Text("Hello world", {
x: 100,
y: 100,
size: 50,
}).setup(async (obj) => {
await sleep(100);
obj.text = "Hi world";
}),
);
We need to use animate()
to animate the object. The first parameter is the function of animations, the second is the holding frame of animation, and the finally is more parameters.
import { createCar, Scene, Text, sleep, move } from "newcar";
const scene = new $.Scene().add(
new Text("Hello world", {
x: 100,
y: 100,
size: 50,
}).setup(async (obj) => {
await sleep(100);
obj.animate(move, 100, {
toX: 300,
toY: 300,
});
}),
);
These codes will let the text move to (300, 300) during 100 frame.
You also can use timing function to control the speed of animation, just use parameter by
. Newcar also has some timing function built in, please refer to https://www.desmos.com/calculator/yasltaa9um to get more information.
This is all the things of entry-level docs. If you like this project, please give us a star on GitHub.
The document is served on newcar.js.org.
Copyright (c) 2022-present, BugDuck Team
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。