说回项目，今天和大家分享的是一个前端动画引擎，它具备强大的绘图功能并兼备的优秀的性能，它叫：Newcar
Newcar 是什么
Newcar是一个现代化的前端动画引擎，基于CanvasKit-WASM，在Skia的WebAssembly版本的加持下，既保证了它的性能，又带来了强大的绘图功能。
它具备以下的特点：
项目团队是由中学生组成的，放个B站的图，感兴趣可以去搜搜看。
背景故事
对于中学生来说，能想到做开源真的很不容易，这也是源于他们的故事。
上数学课时，老师掏出了他清朝老幻灯片进行讲解，结果里面的flash课件打不开，因为电脑没有安装flash。于是我就在想，既然flash功能那么强大但没落了，我为什么不自己写一个类似于flash的库呢？说干就干，在2022年9月份开始思考，一直到12月份开始编写代码
刚开始的newcar十分简陋，甚至是基于原生Canvas的，性能非常差，动画编写的步骤也很繁杂。后来的newcar除了模仿flash，也集合了Manim等动画引擎及svg动画的设计原理。目前的Newcar的最新版本是重写重设计后的版本，但是未来会有更强大的功能
使用Newcar浏览器模式
首先你需要准备的环境和工具有：
Node.js（推荐 LTS 18 及更高版本）包管理器（npm、pnpm 或 yarn）一个现代的代码编辑器，如 VSCode、WebStorm 等一个支持 WebAssembly 的浏览器之后创建一个项目
$ pnpm create vite my-newcar-project$ cd my-newcar-project$ pnpm install
接下我就不一步步的来说明代码的使用，直接给大家放一个示例，来看一下效果。首先是代码：
import { CarEngine, Scene, easeInCirc, Path, stroke } from "newcar";const engine = await new CarEngine().init( "<https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm>");app = engine.createApp(document.querySelector("#canvas")!);const root = new Path({ style: { fill: false, border: true, scaleX: 5, scaleY: 5 }, x: 550, y: 200}).animate(stroke, 0, 100, { by: easeInCirc});root.addPathFromSVGString(` M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z `);const scene = new Scene(root);app.checkout(scene);app.play();
本地模式
本项目也支持本地模式，你也可以不在浏览器里运行。首先，本地需要安装ffmpeg，接下执行以下：
npm install -g @newcar/cli#ornpm i -g @newcar/cli
然后初始化引擎，并创建一个 LocalApp：
// 初始化以及导入省略const app = engine.createLocalApp(1600 / 画布的宽 /, 900 / 画布的高 /);// 以下省略，注意，local 模式下没有 `play` 方法
最后，我们设置 app 为默认导出：
export default app;
然后我们运行 ncli 命令：
$ ncli export input.js 200 output.mp4 --fps=60未来计划
项目组给未来也制定了很多规划，希望可以将newcar做得越来越好。
可以从项目根目录下的mods目录看，目前newcar已经发布了数学模块（包括数轴，平面直角坐标系，函数图像等），未发布的有：几何模块，markdown模块，动态图表模块，ui模块，物理模块，思维导图模块等等未来将推出事件系统，让他变成动画游戏二合一引擎一些小的东西比如动画树总结如果你看过项目的内容，你会发现整体的感觉就是非常专业，确实可以看出这个中学生团队的实力。现在项目也加入了dromara，肯定会发展得更好。
对这些少年我也想说：人生的路很长，要保持初心，希望你们未来前途无量！
项目信息项目名称： NewcarGitHub 链接：https://github.com/dromara/newcar文档：https://newcar.js.org/zhb站：BugDuck开源团队
