69 lines
3.7 KiB
Markdown
69 lines
3.7 KiB
Markdown
---
|
||
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 插值动画，解决工作/休息切换时长度跳变问题。
|