前端动画库选型：CSS、Framer、GSAP、React Spring

正确的做法

// 正确的做法：使用 Framer Motion import React from 'react'; import { motion } from 'framer-motion'; function FramerMotionExample() { return ( <div> <h2>Framer Motion 示例</h2> {/* 基础动画 */} <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="box" > 淡入动画 </motion.div> {/* 循环动画 */} <motion.div animate={{ rotate: 360 }} transition={{ duration: 2, repeat: Infinity, ease: "linear" }} className="circle" > 旋转动画 </motion.div> {/* 交互动画 */} <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="button" > 悬停按钮 </motion.button> {/* 序列动画 */} <motion.div className="container"> {[1, 2, 3, 4, 5].map((item) => ( <motion.div key={item} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: item * 0.1, duration: 0.5 }} className="item" > 项目 {item} </motion.div> ))} </motion.div> </div> ); }

// 正确的做法：使用 GSAP import React, { useEffect, useRef } from 'react'; import gsap from 'gsap'; function GSAPExample() { const containerRef = useRef(null); const boxRef = useRef(null); useEffect(() => { // 基础动画 gsap.to(boxRef.current, { x: 100, y: 50, rotate: 45, duration: 1, ease: "power2.out" }); // 时间线动画 const tl = gsap.timeline({ repeat: -1, yoyo: true }); tl.to(".item", { x: 100, duration: 0.5, stagger: 0.1 }) .to(".item", { y: 50, duration: 0.5 }) .to(".item", { opacity: 0.5, duration: 0.5 }); }, []); return ( <div ref={containerRef}> <h2>GSAP 示例</h2> <div ref={boxRef} className="box"> GSAP 动画 </div> <div className="container"> {[1, 2, 3, 4, 5].map((item) => ( <div key={item} className="item"> 项目 {item} </div> ))} </div> </div> ); }

// 正确的做法：使用 React Spring import React from 'react'; import { useSpring, animated } from 'react-spring'; function ReactSpringExample() { // 基础动画 const fadeIn = useSpring({ from: { opacity: 0, transform: 'translateY(20px)' }, to: { opacity: 1, transform: 'translateY(0)' }, config: { tension: 100, friction: 10 } }); // 交互动画 const [isHovered, setIsHovered] = React.useState(false); const buttonAnimation = useSpring({ scale: isHovered ? 1.1 : 1, config: { tension: 300, friction: 10 } }); return ( <div> <h2>React Spring 示例</h2> <animated.div style={fadeIn} className="box" > 淡入动画 </animated.div> <animated.button style={buttonAnimation} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="button" > 悬停按钮 </animated.button> {/* 循环动画 */} <animated.div style={useSpring({ rotate: 360, from: { rotate: 0 }, config: { duration: 2000 }, loop: true })} className="circle" > 旋转动画 </animated.div> </div> ); }

// 正确的做法：选择合适的动画库 function AnimationLibraryComparison() { return ( <div> <h1>前端动画库比较</h1> <div className="comparison"> <div className="library"> <h3>CSS Animations</h3> <p>优点：简单、性能好、无需依赖</p> <p>缺点：复杂动画难以实现、交互性差</p> <p>适用场景：简单的过渡效果、加载动画</p> </div> <div className="library"> <h3>Framer Motion</h3> <p>优点：API 友好、交互性强、React 集成好</p> <p>缺点：包体积较大</p> <p>适用场景：React 应用、复杂交互动画</p> </div> <div className="library"> <h3>GSAP</h3> <p>优点：功能强大、性能优异、支持复杂动画</p> <p>缺点：学习曲线较陡</p> <p>适用场景：复杂动画、时间线动画、SVG 动画</p> </div> <div className="library"> <h3>React Spring</h3> <p>优点：基于物理的动画、性能好、API 简洁</p> <p>缺点：功能相对较少</p> <p>适用场景：流畅的物理动画、交互反馈</p> </div> </div> </div> ); }

核心观点

看看，这才叫前端动画！不是简单地使用 CSS 或 setTimeout，而是根据不同的场景选择合适的动画库。

记住，每种动画库都有其优缺点，你需要根据项目需求和复杂度选择合适的工具。Framer Motion 适合 React 应用，GSAP 适合复杂动画，React Spring 适合物理动画，CSS 适合简单过渡。

所以，别再固守一种动画方式了，灵活选择合适的工具，让你的网站动起来！

总结

• CSS Animations：适合简单的过渡效果和加载动画
• Framer Motion：适合 React 应用和复杂交互动画
• GSAP：适合复杂动画、时间线动画和 SVG 动画
• React Spring：适合基于物理的流畅动画
• 性能优化：使用 transform 和 opacity 属性，避免重排
• 动画策略：合理使用动画，避免过度动画
• 可访问性：考虑动画对用户的影响，提供减少动画的选项
• 响应式：确保动画在不同设备上都能正常工作

前端动画，让你的网站更具生命力！