AI 辅助前端动画开发

## 角色
你是专业的 React 动画组件开发 Agent，借助 pixelator、animation-mcp、context7 完成 React 动画组件的开发。
## 核心规则
务必严格遵守核心规则，如果违反核心规则会导致非常严重的问题！
- 确保百分之百按照用户需求执行标准工作流程- 在完成每一个 Todo 后，都需要让我确认是否继续，这对我非常重要！！！
## 可使用工具列表
- `mcp__context7` Context7 MCP Server，用于查阅技术文档- `mcp__pixelator__get_ast_from_url`：从 URL 获取 Pixelator AST- `mcp__animation-mcp__animation_mcp_version`：获取 MCP 版本- `mcp__animation-mcp__scan_workspace`：扫描工作区- `mcp__animation-mcp__list_workspaces`：列出工作区- `mcp__animation-mcp__animation_guideline`：获取 MCP 动画开发指导规范- `mcp__animation-mcp__init_animation_workspace`：初始化动画工作区- `mcp__animation-mcp__analyze_motion_video`：分析动效视频，生成动效技术方案- `mcp__animation-mcp__generate_motion_measurement`：从 Lottie 获取动效标注
## 标准工作流程
### 初始化动画工作区
1. 使用 `mcp__animation-mcp__scan_workspace` 工具扫描工作区，强制执行不可跳过2. 使用 `mcp__animation-mcp__init_animation_workspace` 工具初始化动画工作区
### 分析项目架构和技术栈
你需要分析项目架构和技术栈信息，然后写入 manifest.json 的 constraints 字段，需要分析的信息如下：
1. 项目的目录结构2. 项目使用的 UI 框架及版本，React、Vue、Angular、Svelte、Solid 等3. 项目使用的 CSS 方案，Tailwind CSS、CSS Modules、Scoped CSS、Pure CSS4. 项目是否可以播放 Lottie 动画，使用的 Lottie 库及版本5. 项目使用的 JavaScript 动画库及版本，Anime.js 4、GSAP 等6. 项目使用的图片库及版本，@ali/picture、@ali/hudong-picture 等
// .....

• Pixelator MCP，MGDone 设计稿转代码 MCP 服务

• ○get_ast_from_url，以 MGDone 的设计稿链接为参数，获取视觉稿 AST

• Animation MCP，基于上面的工作流，我做的 MCP 服务

• Prompt  * 2

• animation_develop_guideline 互动动画开发标准工作流

• mini_animation_develop_guideline 互动微动画开发工作流

• 动画工作区管理 Tool * 4

• scan_workspace，扫描项目架构、技术栈

• list_workspace

• init_animation_workspace

• set_active_workspace

• 辅助动效还原 Tool * 3

• analyze_motion_video，分析动画视频，产出分析报告

• generate_motion_measurement，基于动效标注能力，生成动效标注 JSON 数据

• enchance_motion_layers，使用 Pixelator MCP 获得视觉稿，对动效标注数据语义化增强

# 技术方案文档 - progressLine 动画
## 动画概述
这是一个进度条动画，展示一条线的颜色随着进度发生变化的效果。该动画是一个无交互的加载指示器或装饰性元素。
## 交互与动画流程
动画流程分为两个主要阶段：线条的绘制伸展阶段和渐变色的循环流动阶段。
```mermaidgraph TD    A[开始] --> B{动画自动开始};    B --> C[阶段一: 绘制阶段];    C --> D{线条从左侧由0开始向右伸展};    D --> E{在伸展的同时，渐变色跟随头部移动};    E --> F{线条伸展至最大宽度};    F --> G[阶段二: 循环阶段];    G --> H{线条宽度保持不变};    H --> I{渐变色在完整线条上从左至右循环流动};    I --> G;```
## 动画整体分析与分段
这是一个典型的加载或进度条动画，其核心是**宽度/缩放动画**与**背景渐变位移动画**的结合。根据动画流程，可将其清晰地分为两个阶段：
### 阶段一：绘制阶段 (00:00 - 00:04)
**核心表现：** 一条水平线从无到有，从左到右逐渐伸展开来，直至达到预设的最终宽度。
**细节：** 在伸展的过程中，线条内部的彩色渐变似乎也随着线条的"笔尖"一起移动。
### 阶段二：循环阶段 (00:04 - 结束)
**核心表现：** 线条的长度不再变化，保持在最大宽度。
**细节：** 线条内部的彩色渐变开始在一个固定的区域内，从左到右无限循环滚动，创造出一种流光效果。
## 动画各阶段技术方案分析与建议
### 技术选型：Anime.js + CSS
综合考虑实现效果、可控性和性能，**推荐使用 Anime.js 结合 CSS 实现**。CSS 负责定义渐变背景和基础样式，Anime.js 负责精确控制动画的序列和属性变化。
**技术选型理由：**
- **Anime.js:** 非常适合编排这种多阶段、多属性的动画。其 Timeline 功能可以完美地将"绘制阶段"和"循环阶段"串联起来。相比纯 CSS，它在逻辑控制上更灵活。- **Pure CSS:** 也可以通过 `@keyframes` 实现，但将两个阶段无缝衔接并控制循环需要更复杂的技巧，不如 Anime.js 直观。- **Lottie/APNG:** 对于这种纯几何图形和渐变的动画，使用 Lottie 或 APNG 属于"杀鸡用牛刀"，文件体积会更大，也没有必要。
### 阶段一：绘制阶段实现方案
**目标：** 实现线条从左到右的伸展效果。
**技术方案：**
1. **元素：** 使用一个 `<div>` 元素作为线条。
2. **样式 (CSS):**   - 设置 `div` 的高度（例如 `height: 2px;`），初始宽度为 `width: 100%;`（最终宽度）。   - **关键点：** 使用 `transform-origin: left;` 将变换的基点设置在元素的左侧。   - 初始状态下，设置 `transform: scaleX(0);` 将其在水平方向上缩放为0，视觉上不可见。   - 为了实现流光效果，设置一个比元素自身宽的线性渐变背景。例如，`background-size: 200% 100%;`，并定义一个从蓝到青再到紫的 `linear-gradient`。
3. **动画 (Anime.js):**   - 使用 Anime.js 创建一个动画，目标为该 `div`。   - 动画属性为 `transform` 的 `scaleX` 从 `0` 变化到 `1`。   - 同时，为了让渐变看起来是跟随头部移动的，可以动画化 `background-position`。例如，从 `100% 0` 变化到 `50% 0`。   - 设置合适的 `duration` (约4000ms) 和 `easing` (例如 'easeInOutQuad')。
### 阶段二：循环阶段实现方案
**目标：** 在满宽度的线条上实现渐变循环流动的效果。
**技术方案：**
1. **元素：** 沿用阶段一的 `<div>` 元素。此时它的 `scaleX` 已经是 `1`。
2. **动画 (Anime.js):**   - 紧接在阶段一动画之后，添加一个新的动画片段。   - 动画属性为 `background-position`。   - 让 `background-position` 从 `50% 0` 变化到 `-50% 0`（或一个完整的循环周期）。   - 设置 `loop: true` 使其无限循环。   - 设置 `easing: 'linear'` 保证匀速流动。
### 组合实现代码示例
```javascript// 获取线条元素const lineEl = document.querySelector('.gradient-line');
// 使用 Anime.js 的 timeline 功能编排动画const timeline = anime.timeline({  easing: 'linear', // 默认缓动函数});
// 阶段一：绘制timeline.add({  targets: lineEl,  scaleX: [0, 1],  duration: 4000,  easing: 'easeInOutQuad', // 绘制阶段使用缓入缓出，效果更自然});
// 阶段二：循环// 注意：这个动画会紧接着上一个动画结束时开始timeline.add({  targets: lineEl,  backgroundPosition: ['100% 0', '-100% 0'], // 移动一个完整的背景宽度  duration: 2000, // 循环一次的速度  loop: true,});```
## DOM 布局建议
该动画结构非常简单，可以作为一个独立的组件。考虑到它可能作为页面加载指示器覆盖在其他内容之上，或者嵌入在特定容器中，以下是一个通用的布局建议。
```txtRoot└── AnimationContainer (div, position: relative)    └── GradientLine (div, position: absolute; top: 50%; left: 0;)```
**元素说明：**
- **AnimationContainer:** 一个容器 `div`，用于定位和约束内部的动画元素。如果这个动画需要覆盖整个页面，可以将此容器设置为 `position: fixed` 并铺满视口。- **GradientLine:** 真正的线条元素。使用 `position: absolute` 可以方便地在 `AnimationContainer` 中定位。通过 `transform` 实现动画，不会影响布局。
## React 组件布局建议
对于 React 项目，建议按照以下结构组织组件：
```tsxfunction ProgressLine() {  return (    <div className="progress-line-container">      <div className="gradient-line"></div>    </div>  );}```
## 性能优化建议
1. **使用 `transform` 代替 `width`：** 方案中已经采用了 `transform: scaleX()` 来实现伸展动画，而不是直接改变 `width` 属性。这是一个关键的性能优化点，因为 `transform` 动画通常由 GPU 加速，不会触发浏览器的重排（Reflow），性能远高于会改变布局的 `width` 属性。
2. **硬件加速:** 对 `GradientLine` 元素应用 CSS 属性 `will-change: transform, background-position;`。这会向浏览器发出一个明确的信号，告知这些属性即将发生变化，浏览器可以提前为其创建独立的合成层（Compositing Layer），进一步优化动画性能，减少卡顿。
3. **背景动画：** `background-position` 的动画性能在现代浏览器中已经相当不错。对于要求极致性能的场景，可以考虑使用一个伪元素（`::before` 或 `::after`）来承载渐变，并对其 `transform: translateX()` 进行动画，然后通过父元素的 `overflow: hidden` 来裁剪，但对于当前动画效果，直接动画 `background-position` 已足够高效且实现简单。
## 技术栈信息
- **UI Framework:** React 19.1.0- **CSS Solution:** TailwindCSS 4.1.4 (utility-first)- **Animation Library:** Anime.js 4.0.2- **Build Tool:** Vite 7.1.5- **Design Width:** 750px- **Target FPS:** 60fps- **Target Devices:** Mobile

import { useEffect, useRef } from 'react';import { createScope, Timeline, eases, type Scope } from 'animejs';
/** * ProgressLine 组件 * 一个进度条动画组件，展示线条颜色随进度变化的效果 * * 动画分为两个阶段： * 1. 绘制阶段：线条从左到右伸展 * 2. 循环阶段：渐变色在线条上循环流动 */export function ProgressLine() {  const containerRef = useRef<HTMLDivElement>(null);  const scopeRef = useRef<Scope | null>(null);
  useEffect(() => {    if (!containerRef.current) return;
    // 创建 anime.js scope    scopeRef.current = createScope({ root: containerRef.current }).add(() => {      // 创建时间线      const timeline = new Timeline({        frameRate: 60,        playbackRate: 1,        delay: 0,      });
      // 阶段一：绘制阶段 (0-4秒)      // 线条从左到右伸展，同时渐变跟随移动      timeline.add(        '[data-semantic-name="gradient-line"]',        {          scaleX: {            from: 0,            to: 1,            ease: eases.cubicBezier(0.42, 0, 0.58, 1), // easeInOutQuad          },          backgroundPosition: {            from: '100% 0',            to: '50% 0',            ease: eases.cubicBezier(0.42, 0, 0.58, 1),          },          duration: 4000,        },        0,      );
      // 阶段二：循环阶段      // 渐变色在满宽度线条上循环流动      timeline.add(        '[data-semantic-name="gradient-line"]',        {          backgroundPosition: {            from: '100% 0',            to: '-100% 0',            ease: 'linear',          },          duration: 2000,          loop: true,        },        4000,      );    });
    // 清理函数    return () => {      scopeRef.current?.revert();    };  }, []);
  return (    <div      ref={containerRef}      className="progress-line-container relative flex h-[100px] w-full items-center justify-center"      data-semantic-name="progress-line-container"    >      <div        className="gradient-line absolute left-0 h-[2px] w-full"        data-semantic-name="gradient-line"        style={{          transformOrigin: 'left',          transform: 'scaleX(0)',          background: 'linear-gradient(90deg, #4F46E5 0%, #06B6D4 50%, #8B5CF6 100%)',          backgroundSize: '200% 100%',          backgroundPosition: '100% 0',          willChange: 'transform, background-position',        }}      />    </div>  );}