前端动画库选型：CSS、Framer Motion 与 GSAP 实战对比

注意，这里修改 left 属性会触发重排（Reflow），比直接操作 transform 性能差得多。

主流方案：现代动画库实践

1. Framer Motion (React 首选)

如果你在使用 React，Framer Motion 是首选。它的 API 非常直观，基于组件声明式动画。

import React from 'react';
import { motion } from 'framer-motion';

function FramerMotionExample() {
  return (
    <div>
      {/* 基础淡入效果 */}
      <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.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        className="button"
      >
        悬停按钮
      </motion.button>
    </div>
  );
}

这里利用了 whileHover 等预设属性，无需手动监听事件，代码量大幅减少。

2. GSAP (复杂时间线)

对于非 React 环境或需要精细控制的时间线动画，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>
  );
}

注意 stagger 属性，它能轻松实现元素依次播放的效果，这在纯 CSS 中很难优雅地实现。

3. React Spring (物理引擎感)

喜欢自然物理效果的动画，React Spring 是基于弹簧模型的绝佳选择。

import React, { useState } 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] = useState(false);
  const buttonAnimation = useSpring({
    scale: isHovered ? 1.1 : 1,
    config: { tension: 300, friction: 10 }
  });

  return (
    <div>
      <animated.div style={fadeIn} className="box">淡入动画</animated.div>
      <animated.button
        style={buttonAnimation}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        className="button"
      >
        悬停按钮
      </animated.button>
    </div>
  );
}

通过调整 tension 和 friction，你可以微调弹簧的软硬程度，获得更自然的触感。

选型建议与最佳实践

没有万能的库，只有最适合场景的工具。

性能优化提示： 尽量使用 transform 和 opacity 属性，避免触发重排（Reflow）。 可访问性： 记得提供 prefers-reduced-motion 媒体查询的支持，尊重用户的系统设置。 响应式： 确保动画在不同屏幕尺寸下都能正常渲染，不要遮挡关键内容。

前端动画的核心在于'恰到好处'。选对工具，你的网站才能真正拥有生命力。