React动画开发 · 完整方案
🎯 30章 从入门到实战
📚
风格 · 明快活泼
✨ 点击卡片跳转对应章节
01
React动画概述
生态
动画重要性 · 生态概览 · 学习路径
02
CSS过渡与动画基础
transition
transition / @keyframes · React集成 · 淡入淡出
03
React Transition Group 入门
CSSTransition · Transition · 列表动画
04
Transition Group 进阶
SwitchTransition · TransitionGroup · 路由切换
05
Framer Motion 基础
motion组件 · animate/initial/exit · 入场动画
06
Framer Motion 手势与变体
whileHover/Tap/Drag · variants · 可拖拽卡片
07
Framer Motion 布局动画
layout · AnimatePresence · layoutId · 列表重排
08
路径与SVG动画
motion.path · pathLength · 加载图标
09
React Spring 基础
useSpring · useTrail · 数字滚动
10
React Spring 进阶
useTransition · useChain · 手风琴菜单
11
GSAP 与 React 集成
useRef · useGSAP · 时间线动画
12
GSAP ScrollTrigger
滚动驱动 · pin/scrub · 视差滚动
13
React Native 动画基础
Animated API · timing/spring · 弹跳动画
14
React Native 动画进阶
Animated.event · LayoutAnimation · 滑动删除
15
Reanimated 2
Worklet · useSharedValue · 可缩放图片
16
Reanimated 3 新特性
useAnimatedProps · 关键帧 · 下拉刷新
17
Three.js & R3F 入门
Scene/Camera/Renderer · 旋转立方体
18
R3F 动画与交互
useFrame · Raycaster · 交互式3D按钮
19
R3F 粒子系统
Points · BufferGeometry · 星空粒子
20
WebGL & Shader 基础
GLSL · 顶点/片元着色器 · 渐变背景
21
React 与 Shader 集成
ShaderMaterial · 时间驱动 · 波浪效果
22
Lottie 动画应用
lottie-web · 播放控制 · 加载动画
23
Canvas 动画
Canvas API · requestAnimationFrame · 粒子时钟
24
SVG 动画进阶
SMIL · styled-components · 数据可视化
25
动画性能优化
will-change · React.memo · Profiler
26
动画与状态管理
Redux/Zustand · 骨架屏动画
27
动画与路由
React Router v6 · AnimatePresence · 转场
28
React动画测试
Jest · Testing Library · 可访问性测试
29
动画可访问性
prefers-reduced-motion · ARIA · 无障碍
30
综合实战：仪表盘
Framer Motion + D3 · 实时数据 · 性能调优