当前位置：首页 > news >正文

React 动画库

news 2025/8/29 5:49:07

下面，我们来系统的梳理关于 React 动画库：Framer Motion vs React Spring 的基本知识点：

一、动画在现代 React 应用中的重要性

1.1 为什么需要专业的动画库？

用户体验提升：平滑的动画增强用户交互体验
视觉引导：通过动画引导用户注意力
状态反馈：提供操作反馈和状态转换指示
品牌个性：通过动效传达品牌特性

1.2 动画库核心价值对比

特性	CSS 动画	Framer Motion	React Spring
学习曲线	简单	中等	较陡
性能	优秀	优秀	极优秀
控制精度	有限	高	极高
物理动画	不支持	支持	专业级
复杂度	简单动画	中等复杂	高度复杂

二、Framer Motion 深度解析

2.1 核心概念与安装

npm install framer-motion

2.2 基础动画组件

import { motion } from 'framer-motion';// 基本动画
const BasicAnimation = () => (<motion.divinitial={{ opacity: 0, scale: 0.5 }}animate={{ opacity: 1, scale: 1 }}transition={{ duration: 0.5 }}whileHover={{ scale: 1.2 }}whileTap={{ scale: 0.9 }}>可动画元素</motion.div>
);

2.3 高级动画模式

// 关键帧动画
<motion.divanimate={{scale: [1, 1.2, 1.2, 1, 1],rotate: [0, 0, 270, 270, 0],borderRadius: ["20%", "20%", "50%", "50%", "20%"]}}transition={{duration: 2,ease: "easeInOut",times: [0, 0.2, 0.5, 0.8, 1],repeat: Infinity,repeatDelay: 1}}
/>// 手势动画
<motion.buttonwhileHover={{ scale: 1.1 }}whileTap={{ scale: 0.9 }}onHoverStart={() => console.log('hover start')}onHoverEnd={() => console.log('hover end')}
/>

2.4 布局动画

// 布局ID动画
<motion.div layout><motion.h2 layout="position">标题</motion.h2><motion.p layout="position">内容</motion.p>
</motion.div>// 共享布局动画
<AnimatePresence mode="wait"><motion.divkey={selectedItem.id}initial={{ opacity: 0 }}animate={{ opacity: 1 }}exit={{ opacity: 0 }}transition={{ duration: 0.2 }}>{selectedItem.content}</motion.div>
</AnimatePresence>

2.5 滚动触发动画

import { useInView } from 'framer-motion';const ScrollAnimation = () => {const ref = useRef(null);const isInView = useInView(ref, { once: true });return (<motion.divref={ref}initial={{ opacity: 0, y: 50 }}animate={isInView ? { opacity: 1, y: 0 } : {}}transition={{ duration: 0.5 }}>滚动到视口时显示</motion.div>);
};

三、React Spring 深度解析

3.1 核心概念与安装

npm install @react-spring/web

3.2 基于 Hook 的动画

import { useSpring, animated } from '@react-spring/web';const SpringAnimation = () => {const styles = useSpring({from: { opacity: 0, transform: 'translate3d(0, 50px, 0)' },to: { opacity: 1, transform: 'translate3d(0, 0, 0)' },config: { tension: 280, friction: 60 }});return <animated.div style={styles}>动画内容</animated.div>;
};

3.3 物理动画系统

// 弹簧物理动画
const { scale } = useSpring({from: { scale: 0 },to: { scale: 1 },config: {mass: 1,tension: 280,friction: 20,precision: 0.0001}
});// 交互式物理动画
const [props, api] = useSpring(() => ({x: 0,y: 0,config: { mass: 1, tension: 500, friction: 30 }
}));const handleMove = (e) => {api.start({ x: e.clientX, y: e.clientY });
};

3.4 高级动画组合

// 并行动画
const [styles, api] = useSprings(3, index => ({opacity: 0,y: 50,delay: index * 200
}));// 序列动画
const { opacity, y } = useSpring({from: { opacity: 0, y: -50 },to: [{ opacity: 1, y: 0 },{ opacity: 0.5, y: 25 },{ opacity: 0, y: 50 }],config: { duration: 1000 }
});

3.5 使用 useTransition

import { useTransition, animated } from '@react-spring/web';const TransitionAnimation = ({ items }) => {const transitions = useTransition(items, {from: { opacity: 0, height: 0 },enter: { opacity: 1, height: 'auto' },leave: { opacity: 0, height: 0 },config: { tension: 280, friction: 60 }});return transitions((style, item) => (<animated.div style={style}>{item}</animated.div>));
};

四、性能优化策略

4.1 通用优化技巧

// 使用 will-change CSS 属性
<motion.divstyle={{ willChange: 'transform, opacity' }}animate={{ x: 100 }}
/>// 硬件加速优化
const optimizedAnimation = {x: 100,translateZ: 0 // 触发硬件加速
};// 减少重绘区域
<motion.div layout>{/* 只动画必要的部分 */}
</motion.div>

4.2 Framer Motion 性能优化

// 使用 layout="position" 减少布局计算
<motion.div layout="position">只动画位置变化
</motion.div>// 使用 shouldReduceMotion 尊重用户偏好
const shouldReduceMotion = useReducedMotion();<motion.divanimate={shouldReduceMotion ? {} : { x: 100 }}
/>

4.3 React Spring 性能优化

// 使用 immediate 属性跳过动画
const styles = useSpring({x: 100,immediate: prefersReducedMotion
});// 使用 config 优化物理参数
const fastConfig = { tension: 600, friction: 30 };
const smoothConfig = { tension: 280, friction: 60 };

五、响应式动画设计

5.1 基于断点的动画

// 使用自定义 Hook
const useResponsiveAnimation = () => {const isMobile = useMediaQuery('(max-width: 768px)');return useSpring({from: { opacity: 0, y: isMobile ? 20 : 50 },to: { opacity: 1, y: 0 },config: { tension: isMobile ? 400 : 280 }});
};

5.2 手势响应动画

// Framer Motion 拖拽动画
<motion.divdragdragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}dragElastic={0.5}whileDrag={{ scale: 1.1 }}
/>// React Spring 手势跟踪
const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }));const bind = useDrag(({ down, movement: [mx, my] }) => {api.start({ x: down ? mx : 0, y: down ? my : 0 });
});<animated.div {...bind()} style={{ x, y }} />;

六、复杂动画场景实战

6.1 页面过渡动画

// 使用 AnimatePresence (Framer Motion)
<AnimatePresence mode="wait"><motion.divkey={router.pathname}initial={{ opacity: 0, y: 20 }}animate={{ opacity: 1, y: 0 }}exit={{ opacity: 0, y: -20 }}transition={{ duration: 0.3 }}><Component {...pageProps} /></motion.div>
</AnimatePresence>

6.2 列表排序动画

// Framer Motion 列表动画
<motion.ul>{items.map((item) => (<motion.likey={item.id}layoutinitial={{ opacity: 0 }}animate={{ opacity: 1 }}exit={{ opacity: 0 }}transition={{ duration: 0.3 }}>{item.name}</motion.li>))}
</motion.ul>// React Spring 列表过渡
const transitions = useTransition(items, {keys: item => item.id,from: { opacity: 0, height: 0 },enter: { opacity: 1, height: 'auto' },leave: { opacity: 0, height: 0 },config: { tension: 280, friction: 60 }
});

6.3 3D 变换动画

// Framer Motion 3D 动画
<motion.divanimate={{rotateX: 45,rotateY: 45,rotateZ: 45}}transition={{type: "spring",stiffness: 100,damping: 10}}style={{transformStyle: "preserve-3d"}}
/>// React Spring 3D 变换
const { rotateX, rotateY, rotateZ } = useSpring({from: { rotateX: 0, rotateY: 0, rotateZ: 0 },to: { rotateX: Math.PI / 4, rotateY: Math.PI / 4, rotateZ: Math.PI / 4 }
});<animated.divstyle={{transform: rotateX.to(x => `rotateX(${x}rad)`).concat(rotateY.to(y => `rotateY(${y}rad)`)).concat(rotateZ.to(z => `rotateZ(${z}rad)`))}}
/>

七、测试与调试

7.1 动画测试策略

// 使用 Jest 测试动画逻辑
test('should animate to correct position', () => {const { result } = renderHook(() => useSpring({ x: 100 }));expect(result.current.x.get()).toBe(100);
});// 测试动画回调
const onAnimationComplete = jest.fn();
<motion.divanimate={{ opacity: 1 }}onAnimationComplete={onAnimationComplete}
/>

7.2 调试技巧

// Framer Motion 调试
<motion.divanimate={{ x: 100 }}onUpdate={latest => console.log('Animation update:', latest)}
/>// React Spring 调试
const styles = useSpring({x: 100,onRest: () => console.log('Animation completed')
});

八、实践与常见问题

8.1 性能实践

避免动画阻塞：使用 will-change 和 transform
减少布局抖动：避免动画 width/height 属性
合理使用延迟：错开动画执行时间
尊重用户偏好：支持 prefers-reduced-motion

8.2 可访问性考虑

// 支持减少动画偏好
const shouldReduceMotion = useReducedMotion();// 提供动画控制
<button onClick={() => setAnimationsEnabled(!enabled)}>{enabled ? '禁用动画' : '启用动画'}
</button>

8.3 常见问题解决方案

问题：动画卡顿

// 解决方案：使用 transform 代替 top/left
// 错误
animate({ top: 100, left: 100 })// 正确
animate({ transform: 'translate3d(100px, 100px, 0)' })

问题：布局闪烁

// 解决方案：使用 layout="size" 或 layout="position"
<motion.div layout="position">只动画位置变化
</motion.div>

九、工具与资源

9.1 开发工具

Framer Motion DevTools：浏览器扩展
React Spring DevTools：调试工具
Chrome Performance Tab：性能分析

9.2 学习资源

Framer Motion 文档
React Spring 文档
动画性能指南

9.3 设计资源

Framer：交互设计工具
Lottie：After Effects 动画
Rive：实时交互动画

十、选择指南与总结

10.1 技术选型决策树

10.2 核心优势对比

特性	Framer Motion	React Spring
学习曲线	⭐⭐	⭐⭐⭐
开发速度	⭐⭐⭐	⭐⭐
性能表现	⭐⭐⭐	⭐⭐⭐⭐
物理精度	⭐⭐	⭐⭐⭐⭐
社区生态	⭐⭐⭐	⭐⭐
文档质量	⭐⭐⭐	⭐⭐