--- 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° 正位，显示眼睛，眼睛跟随鼠标移动。 - **工作**：六边形开始持续旋转，显示 `>` 符号。 - 状态切换时内部符号立即变形，不等待外框停稳；外框则从当前角度平滑过渡到目标角度或开始旋转。 - 内部符号在空闲/工作之间通过**同两条 ``** 进行 morph： - `transform`（位置 + 旋转）使用 CSS `transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1)`。 - `x2`（线段长度）使用同节奏（0.55s，相同 cubic-bezier）的 `requestAnimationFrame` 插值，避免长度跳变。 - 提供一个独立的"停止追踪 / 开始追踪"按钮：停止追踪时眼睛平滑回到默认居中位置。 ### 技术实现 - **纯 SVG**：外框用 ``，眼睛 / `>` 用 ``，整体用 `` + ``。 - **动画方式**： - 六边形旋转：CSS `@keyframes spin` + CSS `transition`。 - 符号变形：CSS `transition` 改变 `transform`；JS `requestAnimationFrame` 插值改变 `x2`。 - 眼睛追踪：JS `requestAnimationFrame` 实时更新 SVG `` 的 `transform`。 - **无 Canvas / WebGL / GIF / Lottie / 图片序列帧**。 - 整体缩放不会导致比例或长度失调（矢量 SVG）。 ## 设计约束 ### 不可改动的核心动画 `demo/ai-avatar/index.html` 中 **空闲（idle）** 与 **工作（work）** 两个核心状态的切换动画不可改动： - 六边形外框：空闲时从当前角度滑到最近的 60° 正位后停住；工作时从当前角度开始持续旋转。 - 内部图标：空闲为眼睛，工作为 `>` 符号，二者通过同两条 `` 元素进行 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 插值动画，解决工作/休息切换时长度跳变问题。