newcar: 基于CanvasKit-WASM的现代化动画引擎

Announcement

Newcar is being refactored and rewrited, please refer to next to get latest process.

📔 Introduction

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).

🌟 Feature

Rich API interfaces 🛠️: Powerful and diverse APIs that provide greater freedom in creating animations.
Based on CanvasKit-WASM 🧬: Based on CanvasKit-WASM, which reduced communication and data exchange between CPU and GPU ensures strong animation speed
High degree of customization ⚙️: Strong customizability, allowing for the creation of one's own animation style.
Chain syntax ⛓️: You can use chain syntax instead of saving object into variable, which makes the development efficient

Getting Started

Installation

Install the newcar with your preferred package manager:

npm

npm install newcar

yarn

yarn add newcar

pnpm

pnpm add newcar

Initialization

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.

Create

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.

Add a Object

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.

Setup

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";
  }),
);

Animate

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.

🧭 Future Plans

Add reactivity system like ReactJS and VueJS.
Add plugin system for the project, and make it has more flexibility.
Add charts module, to make the dynamic data animation.
Add geometry module.
Add skeleton module, let's make some animation!
Add event system to be a interactive animation engine.
Add UI.
Add physical engine for objects.

📖 Documentation

The document is served on newcar.js.org.

codingrun / newcar

Announcement

📔 Introduction

🌟 Feature

Getting Started

Installation

npm

yarn

pnpm

Initialization

Create

Add a Object

Setup

Animate

🧭 Future Plans

📖 Documentation

简介

发行版

贡献者

近期动态

codingrun / newcar .gitee-modal { width: 500px !important; }

Announcement

📔 Introduction

🌟 Feature

Getting Started

Installation

npm

yarn

pnpm

Initialization

Create

Add a Object

Setup

Animate

🧭 Future Plans

📖 Documentation

简介

发行版

贡献者

近期动态

搜索帮助

codingrun / newcar