前端图形学【免费下载链接】bloubSVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.项目地址https://gitcode.com/gh_mirrors/bl/bloub点击查看免费下载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 中声明了各自的时长与变形曲线状态 ID名称默认时长动画特点idle静止2.4s呼吸 眨眼唯一带基础脸的形态thinking思考2.6s三点脉冲从球体两侧长出wink/wide眨眼 / 睁大眼睛1.6s / 1.8s眼睛形态的精细变化alert/exclaim警示 / 感叹号2.4s / 2s身体本身变形为!notify通知2.2s右上角弹出蓝色圆点sleep休眠2.4s缩成小点上下弹跳egg/hexagon蛋形 / 六边形1.8s / 1.6s轮廓变形为几何体play播放2s三角形被彩色弧线扫过orbit轨道3.4s三环绕球旋转最华丽的状态burst/comet爆散 / 彗星2.6s / 2.4s粒子炸裂与彗尾拖曳 还有一个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取消。两种格式各有取舍格式规格背景适用场景MP4 视频1024px 30fps必须白色更轻更流畅适合网页、演示GIF 动图320px 20fps透明或白色可选到处能播放Discord/Slack 头像首选导出细节GIF 按颜色频率选 256 色调色板、MP4 以量化器而非码率控质量等记录在 docs/export.md值得一读。6️⃣ 实用调试链接与延伸阅读#planche14 个状态并排冻结展示一眼核对全部素材#etatorbitstop直接打开某个状态并暂停便于单独观察#arrivee重放开场动画。文档内容docs/architecture.md纯函数引擎、半径剖面变形、蒙版眼睛docs/measurements.md测量方法为什么代码里的数都是量出来的docs/export.mdSVG / PNG / GIF / MP4 导出原理docs/interface.md三栏布局与编辑器的键盘操作约定README.md项目总览与运行方式小结bloub 的时间线编辑器把编排头像动画压缩成了三个动作——拖卡片、拉时长、点导出。理解了 14 个状态的特性与最短时长约束你就能快速拼出节奏舒适的动画循环并把它变成任何平台上可循环播放的自定义头像。赞分享前端图形学【免费下载链接】bloubSVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.项目地址https://gitcode.com/gh_mirrors/bl/bloub点击查看免费下载相关推荐3 个免费专利数据接口快速完整搭建你的专利查询系统3 个免费专利数据接口快速完整搭建你的专利查询系统 上周帮团队做竞品专利布局调研商业专利库报价下不来官方接口申请流程又长。最后从 public apis知识库文档CoastSat终极安装教程从零开始搭建卫星海岸线分析平台CoastSat终极安装教程从零开始搭建卫星海岸线分析平台 想要快速掌握全球海岸线监测技术吗CoastSat作为一款强大的卫星海岸线分析工具让你能够从卫星科研GIS图像处理机器学习掌握Nuklear动画曲线编辑器打造丝滑自定义缓动函数的完整指南掌握Nuklear动画曲线编辑器打造丝滑自定义缓动函数的完整指南 Nuklear作为一款单头文件ANSI C跨平台GUI库为开发者提供了轻量级且高效的界面解人工智能大模型AI Agent多智能体Agent 框架Agent 编排工具调用RAGMCP 服务语音创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考