XML 几何动画引擎

写结果,
不写过程。

告诉它“要去哪”,补间、轨道、缓动和字幕交给引擎。
一份脚本,得到可播放、可讲解、可导出的动画。

23套内置配色
20个示例作品
0依赖 · 纯前端
MIT开源许可
声明式

左边是脚本,
右边就是动画。

不是示意图,而是真实运行的引擎。选一个看看。

path.xml

          

为什么好用

少写一点,
多得一点。

声明式

写“终点”,不写“过程”

每个 step 只描述画面要变成什么样。补间、缓动、轨道、拖尾都由引擎推算,改一个数字就换一种效果。

导出

一份脚本,四种成品

离线逐帧导出视频,也能输出分镜长图、当前帧和分享链接。

WebM 视频分镜长图PNG分享链接
配色

23 套配色,一行套用

瓷白、石墨、极光、香槟,以及 Nord、Dracula、Pantone 年度色……

数据驱动

CSV 进去,图表出来

for 循环加表达式,一份数据生成一整组图形。

可讲解

每一步都有字幕

暂停在任何一步,画面都自带解释。

黑棋落在天元,开局占据中心
缓动与音效

每个动作都有手感

十几种缓动曲线,8 个合成音效,不需要任何音频文件。

布局

流式排布,不用手算坐标

row / column 自动排开,after / below 相对定位,distribute 等距分布。

适用场景

讲清楚一件事,
一份脚本就够。

从课堂到会议室,凡是需要“一步一步讲明白”的地方。

作品库

看看别人怎么写的。

棋类教程、算法可视化、数据看板、流程图……每个都是实时渲染,悬停即可播放。

写法对比

同一个动画,
少写四分之三。

“A 沿一条曲线走到 B,带拖尾和缓动”。左边自己算每一帧,右边只写目标。

手写逐帧 · JavaScript

          
CodeMotion · XML

          
不写插值

曲线、缓动、拖尾都由引擎推算。

不管帧率

时间轴是确定的,任何一帧都能精确回放。

现成的讲解与导出

字幕、步骤跳转、视频和分镜不用另外做。

配色

一行 palette,
换一种气质。

23 套内置模板:低饱和的精选系列、Material、Pantone 年度色,以及开发者熟悉的 Nord、Dracula、Solarized。

三步上手

几分钟,做出第一支动画。

编辑器左边有教程栏:跟着一步步点“插入代码”,或者自己照着敲,写对了会自动打勾。

摆好对象

用 <circle at="1,1"/> 把图形放在网格上,位置以格子为单位,不用算像素。

写下步骤

每个 <step say="…"> 写“让谁变成什么样”,字幕和停顿自动配好。

套配色,导出

在 <scene> 上加一行 palette,然后导出视频或分镜。

常见问题

你可能想问。

现在就试试

不用安装,
打开就能写。