前端动画库
// 正确的做法：使用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>
);
}
每种动画库都有其优缺点，你需要根据项目需求和复杂度选择合适的工具。Framer Motion适合React应用，GSAP适合复杂动画，React Spring适合物理动画，CSS适合简单过渡。
所以，别再固守一种动画方式了，灵活选择合适的工具，让你的网站动起来！
总结
CSS Animations：适合简单的过渡效果和加载动画
Framer Motion：适合React应用和复杂交互动画
GSAP：适合复杂动画、时间线动画和SVG动画
React Spring：适合基于物理的流畅动画
性能优化：使用transform和opacity属性，避免重排
动画策略：合理使用动画，避免过度动画
可访问性：考虑动画对用户的影响，提供减少动画的选项
响应式：确保动画在不同设备上都能正常工作
————————————————
版权声明：本文为CSDN博主「大山哥AGI」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cannonmonster01/article/details/159729432
