agent-Specialization/.astrion/memory/ai_avatar_demo.md

name	description
ai_avatar_demo	当需要了解或继续开发/修改 agents 项目的 AI 形象头像 demo 时，应该索引本记忆

---

name: ai_avatar_demo description: 当需要了解或继续开发/修改 agents 项目的 AI 形象头像 demo 时，应该索引本记忆

AI 形象头像 Demo

文件位置

/Users/jojo/Desktop/agents/正在修复中/agents/demo/ai-avatar/index.html

设计目标

为项目设计一个独特、动态的 AI 形象，替代之前从网上找的通用小机器人 SVG。

当前设计

视觉构成

• 外框：flat-top 圆角正六边形（上下边水平，底部是一条横线），中心 (100,100)，外接圆半径 80，圆角半径 14。
• 内部符号：由两条等粗白色线段组成：
  • 空闲态：两条竖线作为眼睛，长度 22，间距 32，位于 y ≈ 84（面部上半区域略偏上）。
  • 工作态：> 终端提示符（无下横线），尖端朝右，开角 60°，单条线长度 34。

状态与动画

• 空闲：六边形停到最近的 60° 正位，显示眼睛，眼睛跟随鼠标移动。
• 工作：六边形开始持续旋转，显示 > 符号。
• 状态切换时内部符号立即变形，不等待外框停稳；外框则从当前角度平滑过渡到目标角度或开始旋转。
• 内部符号在空闲/工作之间通过同两条 <line> 进行 morph：
  • transform（位置 + 旋转）使用 CSS transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1)。
  • x2（线段长度）使用同节奏（0.55s，相同 cubic-bezier）的 requestAnimationFrame 插值，避免长度跳变。
• 提供一个独立的"停止追踪 / 开始追踪"按钮：停止追踪时眼睛平滑回到默认居中位置。

技术实现

• 纯 SVG：外框用 <path>，眼睛 / > 用 <line>，整体用 <svg> + <g>。
• 动画方式：
  • 六边形旋转：CSS @keyframes spin + CSS transition。
  • 符号变形：CSS transition 改变 transform；JS requestAnimationFrame 插值改变 x2。
  • 眼睛追踪：JS requestAnimationFrame 实时更新 SVG <g> 的 transform。
• 无 Canvas / WebGL / GIF / Lottie / 图片序列帧。
• 整体缩放不会导致比例或长度失调（矢量 SVG）。

设计约束

不可改动的核心动画

demo/ai-avatar/index.html 中 空闲（idle） 与 工作（work） 两个核心状态的切换动画不可改动：

• 六边形外框：空闲时从当前角度滑到最近的 60° 正位后停住；工作时从当前角度开始持续旋转。
• 内部图标：空闲为眼睛，工作为 > 符号，二者通过同两条 <line> 元素进行 morphing 变形。
• 变形节奏统一为 0.55s cubic-bezier(0.22, 1, 0.36, 1)：
  • transform 由 CSS transition 处理。
  • x2 长度由 JS requestAnimationFrame 插值处理（CSS transition 不直接支持 SVG x2 属性）。

设计原则

• 只允许 SVG 的微动 / 线条 / 点之间的优雅细微动化。
• 禁止花哨特效：脉冲波纹、光标闪烁、发光、强烈缩放、大幅度弹跳等。
• 新增工作状态时，应保持通用切换容器，避免为每个 SVG 单独适配位置。
• 内部图标线条应比外框稍细，保持视觉层次感。

关键调整历史

• 外框从 pointy-top 改为 flat-top（横线在底部）。
• 边角从锐利直线改为 Q 贝塞尔圆角。
• 状态含义反转：空闲 = 静止 + 眼睛 + 追踪；工作 = 旋转 + >。
• 眼睛长度缩短，位置上移至 y=84。
• 鼠标追踪范围水平/垂直均为 ±10px。
• 2026-07-01：为 x2 长度变化增加与 transform 同节奏的 JS 插值动画，解决工作/休息切换时长度跳变问题。