前端动画库对比：CSS、Framer Motion、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 属性，避免重排。
• 动画策略：合理使用动画，避免过度动画。
• 可访问性：考虑动画对用户的影响，提供减少动画的选项。
• 响应式：确保动画在不同设备上都能正常工作。

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