# Animation Flow

> 为网页生成可预览的动画组件，目标框架由 AI 探测项目决定。当用户需要把预置的网页动画效果落地到 React/Vue/Svelte/原生项目时使用此技能——即使没明说"动画"也要触发。覆盖五类效果：① 数字滚动/计数（数字从0跳到目标值、统计数字递增、数据成就展示）；② Hover光效（卡片扫光、鼠标跟随光晕、产品卡片悬停光线扫过）；③ 手风琴（横向折叠面板、悬停展开变大、类别展示）；④ 定屏滚动/粘性滚动（左固右滚、sticky 标题随滚动叙事、苹果官网式滚动布局）；⑤ 打字机/逐字动画（文字一个个蹦出、光标闪烁、终端式输出、标语轮播）。技能提供可预览 HTML 模板，按 component-spec.md 转换为符合规范的组件代码。不适用于：动画/动效调试（Framer Motion 卡顿、CSS 动画 bug）、路由切换过渡动画、loading spinner、数据图表、轮播图、SVG 描边、Three.js/3D 粒子，或纯后端/无前端任务。

- Skill: `xiao0916/animation-flow` (Agent Skill, multi-file: 15 files)
- Install (CLI): `npx skillmds@latest add xiao0916/animation-flow`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xiao0916/animation-flow/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xiao0916 (https://skillmd.com/u/xiao0916)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xiao0916/animation-flow

---


# Animation Flow

为项目生成可配置的动画组件。每个效果以可预览的 HTML 模板形式提供，AI 探测目标项目框架后按 `component-spec.md` 规范把 HTML 转换为对应组件——React / Vue / Svelte / 原生等均支持。

## 工作原理

技能将用户意图匹配到 `templates/` 目录下的动画模板。每个模板包含 README（关键词、框架中立数据 schema、可调参数）和 effect.html（可直接浏览器打开预览的完整实现）。技能读取匹配的模板，探测目标框架，按 `component-spec.md` 规范转换并输出。

### 触发识别

将用户请求匹配到以下模式（支持中英文）：

| 效果 | 关键词 | 用户想要什么 |
|------|--------|-------------|
| 数字滚动 | number-scroll, 数字滚动, counter, counting, 数字递增, 数字动画, 数字计数, 统计动画, 数据滚动 | 滚动到视口时数字从0递增到目标值——数据展示区、成就统计 |
| Hover光效 | hover-glow, hover光效, 光效, 扫光, 卡片光效, 鼠标跟随光效, card glow, 产品卡片, 产品展示卡片, 鼠标悬停效果 | 鼠标悬停时卡片出现扫光和径向光效——产品展示 |
| 手风琴 | accordion, 手风琴, 折叠面板, 悬停展开, hover expand, 横向展开, 图片展开, 类别展示, interactive panels | 横向排列的面板悬停时展开显示详情——类别展示 |
| 定屏滚动 | fixed-scroll, 定屏滚动, sticky scroll, 固定滚动, 左固右滚, parallax scroll, 企业文化页面, 关于我们页面, sticky sidebar scroll | 左侧固定右侧随页面滚动——企业文化、关于我们页面 |
| 文字打字 | typewriter, 打字效果, 打字机, typing effect, text typing, 文字逐字显示, 逐字动画, 文字动画, 打字动画, 终端打字 | 文字逐字输入并循环展示多行——首页标语、代码展示 |

如果用户请求没有匹配到任何关键词，读取所有 `templates/*/README.md` 文件，列出所有可用效果供用户选择。

### 工作流程

1. **识别效果** — 通过关键词匹配用户描述到模板，或展示选项列表
2. **读取模板** — 加载匹配的 `templates/<效果>/effect.html` 和 `README.md`
3. **探测目标框架** — 按 `component-spec.md` 第 1 节「框架探测」的顺序判断；判断不出或同项目多框架特征冲突时显式询问用户
4. **转换组件** — 套用 `component-spec.md` 规范，把 HTML + README schema 转成目标框架组件，输出：完整组件代码、使用示例、安装命令（若有依赖）、落地提示
5. **跟进调整** — 询问用户是否需要调整颜色、动画时长或数据以适配项目风格

## 模板加载

按需读取模板文件——不要一次把所有模板加载到上下文中。匹配到效果后，只读取该效果的 `effect.html` 和 `README.md`：

```
templates/<效果名>/effect.html    — 可预览效果实现（纯 CSS + 原生 JS）
templates/<效果名>/README.md       — 数据结构、可调参数、依赖
```

## 组件规范

转换成组件时，读取并遵循 `component-spec.md` 的全部规范约束（框架探测、Props 驱动、TS 类型、自包含样式、最小依赖、惯用写法、命名惯例、响应式 + 可访问性、转换输出清单）。**何时读**：工作流第 4 步「转换组件」前读取一次。

## 可用效果

### 数字滚动
- **目录**: `templates/number-scroll/`
- **效果**: 数字从0递增到目标值，滚动到视口时触发动画。适合数据展示区。
- **依赖**: 无

### Hover光效
- **目录**: `templates/hover-glow/`
- **效果**: 卡片悬停时出现扫光和径向光效，跟随鼠标移动。适合产品展示。
- **依赖**: 无

### 手风琴
- **目录**: `templates/accordion/`
- **效果**: 横向排列的面板悬停时平滑展开，显示详细内容。适合类别展示。
- **依赖**: 无

### 定屏滚动
- **目录**: `templates/fixed-scroll/`
- **效果**: 左侧固定，右侧随页面滚动。常用于企业文化页面。
- **依赖**: gsap（含 ScrollTrigger）

### 文字打字
- **目录**: `templates/typewriter/`
- **效果**: 文字逐字输入并循环展示多行文本，配光标闪烁。适合首页标语、终端风格界面。
- **依赖**: 无

## 扩展新效果

新增动画效果模板时，读取并遵循 `adding-templates.md` 的 3 阶段确认流程（定义 → 实现 → 集成）。每阶段末必须向用户呈现产出并等待确认，不要跳过门控直接写文件。**何时读**：仅当用户请求添加一个 `templates/` 下尚不存在的新效果时读取。