---
name: ai_avatar_demo
description: 当需要了解或继续开发/修改 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 插值动画，解决工作/休息切换时长度跳变问题。
