fec-svg-animationlisted
Install: claude install-skill bovinphang/frontend-craft
# SVG 动画实现
## Purpose
为 SVG 图标、插画和数据可视化提供可维护、可访问、性能可控的动画方案。
## When to Use
- 需要实现 SVG 图标、Logo、插画或路径描边动画。
- 需要在 React/Vue 组件中接入 Framer Motion、GSAP 或 CSS 动画。
- 需要根据 `prefers-reduced-motion` 提供动效降级。
- 不用于复杂 3D/WebGL 场景；此类场景优先使用 Canvas / Three.js workflow。
## Procedure
### 1. 选择动画方式
按复杂度和运行时需求选型：
| 场景 | 推荐 |
| --- | --- |
| hover/focus、opacity、transform | CSS animation/transition |
| 路径描边、简单重复动效 | CSS + `stroke-dasharray` |
| React 组件状态驱动动画 | Framer Motion |
| 时间轴、复杂编排、滚动触发 | GSAP |
| 需要保持零依赖的静态 SVG | CSS 或 SMIL |
如果动效跨越页面转场、滚动叙事或复杂组件编排，应先按交互动效 workflow 判断强度、懒加载和 reduced-motion 策略；本 skill 只负责 SVG 图形本身的路径、形变和图标 motion。
### 2. 使用 CSS 实现路径描边
```tsx
export function CheckmarkIcon() {
return (
<svg viewBox="0 0 24 24" className="checkmark" aria-hidden="true">
<path
className="checkmark-path"
d="M5 12.5l4.5 4.5L19 7"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
```
```css
.checkmark-path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: draw-checkmark 420ms ease-out forwards;
}
@keyframes draw-checkmark {
to {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.checkmark-path {
animation: none;
stroke-dashoffset: 0;
}
}
```
### 3. 在 React 中使用 Framer Motion
```tsx
import { motion, useReducedMotion } from "framer-motion";
export function AnimatedSparkline({ path }: { path: stri