adding-animations

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Adding Animations (MANDATORY)

添加动画（必须遵循）

Agent Workflow (MANDATORY)

Agent工作流（必须遵循）

Before ANY animation work, use

TeamCreate

to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Find existing Framer Motion patterns
fuse-ai-pilot:research-expert - Verify latest Framer Motion v11 API
Check existing animation timing conventions

After implementation, run fuse-ai-pilot:sniper for validation.

在开展任何动画工作之前，请使用

TeamCreate

生成3个Agent：

fuse-ai-pilot:explore-codebase - 查找现有Framer Motion模式
fuse-ai-pilot:research-expert - 验证最新Framer Motion v11 API
检查现有动画时间规范

实现完成后，运行fuse-ai-pilot:sniper进行验证。

Overview

概述

Feature	Description
Framer Motion	Animation library (REQUIRED)
Stagger	List/grid reveal patterns
Hover/Tap	Interactive micro-animations
Accessibility	prefers-reduced-motion support

特性	说明
Framer Motion	动画库（必须使用）
Stagger	列表/网格渐显模式
Hover/Tap	交互式微动画
Accessibility	支持prefers-reduced-motion（减少动效偏好）

Critical Rules

核心规则

Every component needs animation - No static components
Stagger on lists - Container + item variants
Hover on interactive - Buttons, cards, links
Respect reduced motion - useReducedMotion hook
Match existing patterns - Analyze codebase first

每个组件都需要添加动画 - 禁止静态组件
列表使用Stagger效果 - 容器+子元素变体
交互元素添加悬停效果 - 按钮、卡片、链接
尊重减少动效偏好 - 使用useReducedMotion钩子
匹配现有模式 - 先分析代码库

Timing Guidelines

时间规范

Interaction	Duration	Easing
Hover	50-100ms	ease-out
Button press	100-150ms	ease-out
Modal open	200-300ms	ease-out
Page transition	300-400ms	ease-in-out

交互类型	时长	缓动函数
悬停	50-100ms	ease-out
按钮按压	100-150ms	ease-out
模态框打开	200-300ms	ease-out
页面过渡	300-400ms	ease-in-out

Reference Guide

参考指南

Concepts

概念

Topic	Reference	When to Consult
Motion Patterns	motion-patterns.md	Framer Motion examples
Buttons	buttons-guide.md	Hover/press timing
Cards	cards-guide.md	Card hover effects
UI Design	ui-visual-design.md	Micro-interactions
Card Patterns	patterns-cards.md	Card animations
Button Patterns	patterns-buttons.md	Button animations
Navigation	patterns-navigation.md	Nav animations
Micro-interactions	patterns-microinteractions.md	Small details

主题	参考文档	适用场景
动效模式	motion-patterns.md	Framer Motion示例
按钮	buttons-guide.md	悬停/按压时间规范
卡片	cards-guide.md	卡片悬停效果
UI设计	ui-visual-design.md	微交互
卡片模式	patterns-cards.md	卡片动画
按钮模式	patterns-buttons.md	按钮动画
导航	patterns-navigation.md	导航动画
微交互	patterns-microinteractions.md	细节动效

Quick Reference

快速参考

Container + Stagger

容器+Stagger效果

tsx

const container = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.1 } }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

<motion.div variants={container} initial="hidden" animate="show">
  <motion.div variants={item}>Item 1</motion.div>
  <motion.div variants={item}>Item 2</motion.div>
</motion.div>

tsx

const container = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.1 } }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

<motion.div variants={container} initial="hidden" animate="show">
  <motion.div variants={item}>Item 1</motion.div>
  <motion.div variants={item}>Item 2</motion.div>
</motion.div>

Hover Effects

悬停效果

tsx

// Card hover
<motion.div whileHover={{ y: -4 }} transition={{ duration: 0.2 }}>

// Button hover
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>

tsx

// Card hover
<motion.div whileHover={{ y: -4 }} transition={{ duration: 0.2 }}>

// Button hover
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>

Scroll Animation

滚动动画

tsx

<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
/>

tsx

<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
/>

Reduced Motion

减少动效支持

tsx

import { useReducedMotion } from "framer-motion";

const shouldReduce = useReducedMotion();
<motion.div
  animate={shouldReduce ? {} : { y: 0 }}
  transition={shouldReduce ? { duration: 0 } : { duration: 0.3 }}
/>

→ See motion-patterns.md for complete patterns

tsx

import { useReducedMotion } from "framer-motion";

const shouldReduce = useReducedMotion();
<motion.div
  animate={shouldReduce ? {} : { y: 0 }}
  transition={shouldReduce ? { duration: 0 } : { duration: 0.3 }}
/>

→ 完整模式请查看 motion-patterns.md

FORBIDDEN

禁止操作

tsx

// ❌ Random bouncing loops
animate={{ y: [0, -10, 0] }}
transition={{ repeat: Infinity }}

// ❌ Excessive effects
whileHover={{ scale: 1.2, rotate: 5 }}

// ❌ Slow animations
transition={{ duration: 1.5 }}

tsx

// ❌ 随机弹跳循环
animate={{ y: [0, -10, 0] }}
transition={{ repeat: Infinity }}

// ❌ 过度效果
whileHover={{ scale: 1.2, rotate: 5 }}

// ❌ 缓慢动画
transition={{ duration: 1.5 }}

Best Practices

最佳实践

DO

建议

Use container + item variants for lists
Add hover to all interactive elements
Respect prefers-reduced-motion
Keep animations under 400ms
Match existing timing patterns

列表使用容器+子元素变体
所有交互元素添加悬停效果
尊重prefers-reduced-motion偏好
动画时长控制在400ms以内
匹配现有时间模式

DON'T

不建议

Create static components without animation
Use infinite looping animations
Make animations too slow (>400ms)
Forget accessibility considerations
Mix animation libraries (stick to Framer)

创建无动画的静态组件
使用无限循环动画
动画过慢（超过400ms）
忽略无障碍考虑
混合使用多个动画库（坚持使用Framer）