Newcar

A modern animation engine for JavaScript ecosystem, which is based on Skia ...

AnimationCanvas
dromara/newcarnewcarjs.orgnewcar

README

Newcar Banner

Newcar


A modern animation engine for JavaScript ecosystem

📔 Introduction


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

🌟 Features


- Rich API Interfaces 🛠️: Offers powerful and diverse APIs, providing you with greater flexibility in animation creation.
- Based on CanvasKit-WASM 🧬: Utilizes CanvasKit-WASM to minimize communication and data exchange between the CPU and GPU, ensuring robust animation performance.
- High Degree of Customization ⚙️: Features strong customizability, allowing you to create unique animation styles.
- Chain Syntax ⛓️: Enables the use of chain syntax for a more efficient development process, eliminating the need to save objects into variables.

🚗 Future plans


1. From the mods directory under the project root directory, it can be seen that newcar has already released mathematical modules (including number axes, planar Cartesian coordinate systems, function images, etc.). Unpublished modules include: geometry module, markup module, dynamic chart module, UI module, physics module, mind map module, etc
2. In the future, an event system will be launched to turn it into a two in one engine for animation games
3. Some small things, such as animation trees

⌨️ Getting Started


Creating a Project


Although Newcar can be used in various ways, we recommend using Vite for project creation and PNPM for package management.

  1. ```shell
  2. $ pnpm create vite project-name
  3. $ cd project-name
  4. $ pnpm install
  5. ```

Next, select your preferred framework.

Installation


  1. ```shell
  2. $ pnpm add newcar
  3. ```

You will also need to install CanvasKit-WASM. For quick setup, we recommend using the CDN version.

Initialization


  1. ```typescript
  2. import * as nc from 'newcar'

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

  8. const defaultScene = new nc.Scene(new Widget())
  9. engine.createApp().checkout(defaultScene).play()
  10. ```

1. Await init() until CanvasKit is fully loaded.
2. Create a Scene with a root widget as its first parameter.
3. Check out to the defaultScene and play the animation.

Simple, right? Let's dive deeper.

Adding Widgets as Root's Children


Now, let's add some excitement.

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

Animating It


  1. ```typescript
  2. const engine = await new nc.Engine().init(
  3.   '../node_modules/canvaskit-wasm/bin/canvaskit.wasm',
  4. )
  5. const defaultScene = new nc.Scene(
  6.   new Widget().add(new nc.Circle(100).animate(nc.create, 0, 30)),
  7. )
  8. ```

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.

📖 Documentation


- The tutorials is available at newcarjs.org
- The API References is available at apis.newcarjs.org
- The Playground is deployed at playground.newcarjs.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

✨ Stargazers over time


Stargazers over time