企业官网建设流程全解析

• 前端
• 图形学

bloub 是一个用 SVG 复刻 x.ai 机器人头像的开源项目：一个黑色形状在 14 个状态之间平滑变形，两只白色眼睛独立运动，全程不依赖任何动画库。它的核心亮点是内置的时间线编辑器——你可以把 14 个状态像剪视频一样拖进轨道，自由编排成动画循环、调整每段时长，再一键导出成 GIF 或 MP4 的自定义头像动画。

1️⃣ 快速上手：打开 bloub 动画编排界面

无需任何构建配置，两条命令即可启动：

pnpm install pnpm dev

打开http://localhost:5190后，点击左侧边栏的Animations（动画），页面下方就会出现一条带刻度的时间轴，右侧是 14 个状态素材的缩略图面板。这就是 bloub 的时间线编辑器：一个"迷你剪辑台"，把头像动画的编排、预览与导出整合在同一视图里。

2️⃣ 认识素材库：14 个可编排的状态动画

每个状态都是从参考视频逐帧测量出来的独立动画，在 src/bot/states.ts 中声明了各自的时长与变形曲线：

💡 还有一个swirl（漩涡）状态是设置页的入场转场，刻意不进入素材目录，所以不会出现在你的时间线里。

3️⃣ 时间线编辑器操作全解

编辑器 UI 由 src/components/Timeline.vue 和 src/components/TimelineTrack.vue 两个组件构成，所有编辑规则集中在纯数据模块 src/bot/cycles.ts。

添加状态卡片

两种方式，任选其一：

• 点击右侧缩略图：该状态立即追加到轨道末尾；
• 点击轨道末端的「+」卡片：展开状态选择器（src/components/BlockPicker.vue）。

新卡片会带上从视频测量出的默认时长，例如orbit进来就是 3.4 秒。

调整每段时长

每张卡片的宽度与时长严格成正比（基准 44 像素/秒，见 src/ui/timeline.ts）：

• 鼠标拖拽卡片右缘的竖直把手来拉伸/压缩；
• 键盘微调：聚焦把手后按←/→，每次 ±0.1 秒（STEP）；
• 时长下限是 0.6 秒（由最长变形orbit的 0.6s morph 自动推导），上限 10 秒，防止轨道变得不可编辑。

重排、定位与缩放

• 拖动卡片到新的位置即可重排，被挤开的卡片会实时让位；纯键盘用户可用Alt+←/→移动焦点所在卡片；
• 点击卡片跳转到该段开头；拖动上方刻度尺则可精确到 0.1 秒地"刷"播放头，拖拽时会浮出精确时间气泡；
• 缩放轨道：Ctrl+ 滚轮（或触控板捏合）以指针为锚点缩放，也可用右下角的缩放滑杆（0.45x ~ 2.4x）；
• 预览模式：点右下角的"眼睛"按钮全屏观看循环动画，Esc退出，退出时自动暂停方便继续编辑。

管理多条动画序列

轨道左上方是序列菜单（src/components/CycleMenu.vue），可以新建、重命名、删除多个循环——每个循环独立保存到你的浏览器 localStorage，随时切换互不覆盖（单条循环最多 200 个块，共 50 条）。

4️⃣ 编排技巧：让动画循环顺滑不跳帧

bloub 的引擎遵循一条铁律：蒙太奇只会"保持"或"截断"，永远不会缩放时间（见 docs/architecture.md）。这意味着几个实用技巧：

• 别把有"叙事"的状态拉太短。alert（至少 2s）、orbit（至少 2.5s）、burst（至少 2.4s）、comet（至少 2.4s）都有各自的minDuration：短于它，动画会在完成前被硬切——感叹号还没落位、球体还没重组就被切走，观感会明显生硬；
• 0.6 秒下限保的是"渐隐可见"。状态切换是一次指数缓动交叉淡化，块太短时淡入淡出根本来不及呈现，看起来就是跳切；
• 放心重复状态：同一状态可以出现多次，播放到末尾后自动回到开头形成循环（blockAt取模逻辑），非常适合做头像的无缝循环动图；
• 自定义外观会参与导出：左侧 Customiser 里选的 8 种身体形状、12 种颜色、16 种表情会应用到idle、wink、wide、notify等"基础身体"状态上，先调外观、再排时间线、最后导出，成品才是你的专属头像。

5️⃣ 一键导出：GIF 或 MP4 头像动画循环

编排满意后，点击轨道右上角的导出按钮，整个循环会在后台逐帧重放并编码（进度条实时可见，可随时Esc取消）。两种格式各有取舍：

导出细节（GIF 按颜色频率选 256 色调色板、MP4 以量化器而非码率控质量等）记录在 docs/export.md，值得一读。

6️⃣ 实用调试链接与延伸阅读

• #planche：14 个状态并排冻结展示，一眼核对全部素材；
• #etat=orbit&stop：直接打开某个状态并暂停，便于单独观察；
• #arrivee：重放开场动画。

小结：bloub 的时间线编辑器把"编排头像动画"压缩成了三个动作——拖卡片、拉时长、点导出。理解了 14 个状态的特性与最短时长约束，你就能快速拼出节奏舒适的动画循环，并把它变成任何平台上可循环播放的自定义头像。

• 前端
• 图形学