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>
);
}
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>
);
}
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>
优点:功能强大、性能优异、支持复杂动画
缺点:学习曲线较陡
适用场景:复杂动画、时间线动画、SVG 动画
React Spring
优点:基于物理的动画、性能好、API 简洁
缺点:功能相对较少
适用场景:流畅的物理动画、交互反馈
);
}