前端界的 Manim? 一群高中生开发的动画引擎——Newcar

[acbox]

创作背景

在我九年级的时候，我们班主任是数学老师，有一次上课，他掏出了他的清朝保存下来的幻灯片，其中包含有一个 flash 动画演示。但是我们刚换了教学屏幕，没有装 flash ，作为班里的电脑管理员，我也不允许 flash 这种漏洞多端的东西出现在电脑上，于是，我就在想，能不能使用 JavaScript 来开发一个原生的 H5 动画引擎

那天以后吗，我便开始构思，并开始与团队内部成员讨论这件事。十二月底，因为疫情刚刚放开，各个学校纷纷改为网课，我也获得了足够的空闲时间，于是，我带领着团队里的前端主力开始了 Newcar 动画引擎的开发

发展历程

Newcar 初版是基于原生 Canvas2D 的，没有使用任何优化算法，就是单单的把数据渲染到画布上

后来我们便想过使用 WebGL 来替代，于是我开始疯狂学图形学。但一个普通的高一学生怎么可能学得会呢？虽然我们后来短暂的添加了 WebGL2D 支持，但是依然没有解决根本的性能问题——按需渲染

随后我们发现了 Skia 图形库的 WebAssembly 版本——CanvasKit-WASM. 在看完《 Vue3 设计与实现》这本书后，我也从中得到了启发，将 diff 算法移植到了 Newcar 上，现在的 Newcar 可以按需更新，有了 Skia 强大后台的支持，Newcar 的渲染性能基本上不用担心了

特点

1. 高度可自定义化的 API

2. 链式语法，区别于传统动画引擎和游戏引擎需要将物体保存为变量的方式，链式语法会让开发效率更高

3. 拥有类似于 Vue 的 diff 算法的内核，进一步保证了动画的效率和“按需更新”的进行

4. 多平台，可以在现代支持 WebAssembly 的浏览器上和 nodejs 上运行

截至今日，Newcar 已经可以做出一些 Manim 做不到的动画，比如各种统计图表，Markdown 的解析渲染等等。未来，我们会添加更多的官方 mod 使我们的功能更加强大。也欢迎大家的贡献，不管是对内核也好，周边生态也好，我们都希望你能参与进来

• GitHub: https://github.com/dromara/newcar

• Documentation: https://newcarjs.org

Preview

点击跳转到哔哩哔哩演示视频

[acbox]

可以给我们一个 Star 支持一下 qwq

[cydian]

我 Chrome 打开 playground 里面的 demo 有卡顿 动画不丝滑 掉帧

[acbox]

@cydian 那个东西暂时没有开发好，等一个星期后就行了

[acbox]

@cydian 你可以把代码克隆到本地，里面有个 examples 目录，用 vite 启动它就行了

[cydian]

感觉有前景，希望尽快完善在线 demo ，有一个完善的 demo 列表能很好地促进项目发展

[Leon6868]

完成度如此高，非常有意思的作品，期待添加更多的 demo 。回首几年前高中时代的自己，实在羞愧难当。

[Leon6868]

对于普通用户来说，增加一个图形化编辑器能极大地扩大用户面

[acbox]

@Leon6868 图形化编辑器我们也在制作，只不过我们需要先把 1.0.0 发布了，现在还在 alpha 预发布阶段

[yanyao233]

高中...羞愧难当///

[acbox]

playground 暂时有问题，暂时不要用

[LHRUN]

已 Star, 需要更多的 demo +1 ， 没有示例不太有兴趣深入了解

[iMusic]

强嘞我滴乖乖

[xjngbla]

是高中生我吃

[suyuyu]

对高中生表示怀疑 (

[tyzandhr]

强而有力，强而有力口牙！

[nexmoe]

支持

[7gugu]

看起来不错，希望能看到更多 demo

[acbox]

@suyuyu 但是我们真的是（（（

[chesha1]

请问文档站用的是什么主题，挺好看的

[zy0829]

经常能在 b 站看到你直播