什么是 Bloub？
Bloub 是 x.ai 机器人头像的 SVG 复刻版。它使用一个可在 14 种状态之间变形的黑色实心主体，以及两个彼此独立的白色眼睛图形，全部呈现在纯色背景上。动画未使用动画库实现。
该项目将无框架动画引擎与 Vue 3 界面结合在一起。其引擎也不依赖时钟：调用 engine.sample(t) 时，会完全根据提供的时间生成一帧画面。因此，暂停、跳转、冻结预览和无 DOM 测试都能保持确定性。
主要功能
- 14 种测量状态：头像包含待机、眨眼、环绕和爆发等状态。
- 头像自定义：可从 8 种主体形状、12 种颜色和 16 种休息表情中进行选择。选择结果会在多次访问之间保留。
- 时间线编辑器：排列状态、设置每种状态的持续时间，并保存生成的动画。
- 多种导出格式：可将头像导出为 SVG、PNG 或动画 GIF，也可将完整时间线导出为 GIF 或 MP4。
- 按需进行视频编码：仅在首次需要时获取视频编码器。
- 三种语言：界面支持法语、英语和中文。
- 确定性渲染：给定时间始终生成相同图像，从而支持精确的冻结帧和可重复测试。
前置条件
Bloub 使用 Vue 3、Vite、TypeScript、Tailwind CSS 4 和 pnpm。继续之前，请先安装 Node.js 环境和 pnpm。
安装并运行 Bloub
克隆或下载代码仓库，并在终端中打开其目录。
安装依赖：
pnpm install启动 Vite 开发服务器：
pnpm dev在浏览器中打开 http://localhost:5190。
运行测试并创建生产构建
使用以下命令运行 Vitest 测试套件：
pnpm test使用以下命令检查 TypeScript 代码并构建应用：
pnpm build构建命令会在 vite build 之前运行 vue-tsc --noEmit。代码仓库有意未配置 ESLint 或 Prettier，因此 vue-tsc 是其主要的代码质量检查关卡。在认为更改完成之前，请运行 pnpm build。
探索应用
左侧栏可在三个主要视图之间切换。
自定义头像
打开 Customise，即可从 8 种主体形状、12 种颜色和 16 种休息表情中进行选择。应用会在多次访问之间保留这些选择。
创建动画时间线
打开 Animations，将头像状态排列到时间线上。设置每种状态的持续时间，预览序列并保存。播放光标跟踪的是时间线位置，而不只是状态名称，因此同一状态可以在蒙太奇中出现多次。
更改语言并查看鸣谢
打开 Settings，选择法语、英语或中文，并查看项目鸣谢信息。
查看全部 14 种状态
在本地 URL 后添加 #planche，即可将全部 14 种状态以冻结帧并排显示：
http://localhost:5190/#planche
此视图有助于快速检查更改是否意外改变了任何状态。
如需在暂停播放的情况下打开特定状态，请使用 etat 和 stop 哈希参数。例如：
http://localhost:5190/#etat=orbit&stop使用 BloubBot Vue 组件
BloubBot 组件同时支持受控播放和精确冻结帧。以下是一个基本的受控实例，可绑定当前时间线区块、状态和播放状态：
<BloubBot
v-model:block="block"
v-model:state="state"
v-model:playing="playing"
/>block 模型就是播放光标。这一区别很重要，因为时间线可以多次包含同一状态。区块索引标识确切的时间线位置，而 state 则作为输出跟随该光标。
渲染冻结帧
传入状态、尺寸和 frozen-at 值，即可渲染一帧精确画面，而不会启动动画循环：
<BloubBot state="orbit" :size="120" :frozen-at="1.2" />Bloub 使用冻结渲染来创建缩略图和完整状态板。当你需要稳定预览或精确时间点的画面时，冻结渲染同样非常有用。
可用的组件输入
该组件提供以下 props：
sizeshapecolorexpressionpaperfrozenAtcyclefollowgaze
其模型包括 block、state、playing 和 elapsed。有关确切类型和组件详情，请参阅 BloubBot.vue。
导出头像和时间线
屏幕上显示的任何内容都可以导出。对于单个头像，可选择 SVG、PNG 或动画 GIF。对于完整时间线，可选择 GIF 或 MP4。
SVG 和 PNG 导出无需额外的库。动画输出所需的视频编码器仅会在首次请求时加载，因此正常编辑期间无需获取它。更多实现细节请参阅导出文档。
高级提示
使用纯引擎生成确定性帧
src/bot/ 下的代码不依赖框架，也不依赖时钟。需要获取精确时间点的图像时，请使用 engine.sample(t)。由于结果取决于提供的时间，而不是实时钟表，因此暂停、恢复、定位、测试和缩略图生成都能保持一致。
不要简化测量所得的常量
许多数值看起来可能很随意，但它们是根据以每秒 10 帧剪辑的参考素材测量得到的。轮廓通过亚像素光线投射提取，眼睛拟合为胶囊形，颜色和描边宽度则直接采样获得。
将这些常量四舍五入为更易处理的数值，可能会降低项目所要保留的视觉相似度。
修改动画时，请牢记以下测量特征：
- 眼睛朝反斜杠方向倾斜，与垂直方向约成 26 度。
- 身体实际上是一个近乎完美的圆，径向偏差低于 0.7%，而不是圆角方形。
- 过渡使用指数缓出，身体不会产生过冲。
- 彗星效果期间，圆点保持静止，轨迹围绕它运行。
- 静止状态的头像不会漂浮；它的生动感来自视线漂移和眨眼。
在修改配置或重新生成 profiles.ts 之前，请参阅测量文档。
扩展引擎前先了解架构
项目文档介绍了引擎、径向轮廓变形，以及将眼睛形状用作遮罩孔洞的方式。在添加状态或更改变形行为之前，请阅读架构指南。界面、到达序列和国际化层分别记录在界面指南、介绍指南和国际化指南中。
调试前查看发布历史
变更日志每个版本都有一条记录。请查看它，以确定本地副本是否包含某个特定修复。
结语
Bloub 提供了一个经过精心测量的 SVG 头像、可视化自定义界面、时间线编辑器、确定性帧采样以及多种导出格式，无需依赖动画库。请从内置状态面板和组件示例开始，修改后运行测试和生产构建，并在扩展动画时保留测量所得的常量。
代码采用 MIT 许可证。该项目与 x.ai 没有隶属、认可或关联关系。许可证涵盖仓库代码，不涵盖其复刻的设计。