前端动画演进：为何不再推荐 jQuery animate

配合原生 JS 控制类名切换，既轻量又流畅。

// app.js
document.getElementById('animate').addEventListener('click', function() {
  const box = document.querySelector('.box');
  box.classList.add('animate');
  setTimeout(() => {
    box.classList.remove('animate');
  }, 1000);
});

2. Framer Motion (React)

在 React 生态中，Framer Motion 提供了声明式的动画 API，能够很好地处理状态驱动的动画变化。

// App.jsx
import React, { useState } from 'react';
import { motion } from 'framer-motion';

function App() {
  const [animate, setAnimate] = useState(false);

  return (
    <div>
      <motion.div 
        className="box"
        initial={{ x: 0, opacity: 1, height: 100, width: 100 }} 
        animate={animate ? { x: 200, opacity: 0.5, height: 200, width: 200 } : {}} 
        transition={{ duration: 1 }} 
        whileHover={{ scale: 1.1, backgroundColor: 'blue' }} 
      />
      <button onClick={() => setAnimate(!animate)}>
        {animate ? '重置' : '动画'}
      </button>
    </div>
  );
}

这种方式将动画逻辑封装在组件属性中，代码可读性极高，且底层自动处理了性能优化。

3. GSAP (GreenSock)

如果需要更复杂的时序控制、滚动触发动画或兼容旧浏览器，GSAP 依然是行业标准。它的性能极其强悍，支持复杂的序列编排。

// App.jsx
import React, { useRef, useEffect } from 'react';
import gsap from 'gsap';

function App() {
  const boxRef = useRef(null);

  const handleAnimate = () => {
    gsap.to(boxRef.current, {
      x: 200, 
      opacity: 0.5, 
      height: 200, 
      width: 200, 
      duration: 1, 
      ease: 'power2.out'
    });
  };

  const handleReset = () => {
    gsap.to(boxRef.current, {
      x: 0, 
      opacity: 1, 
      height: 100, 
      width: 100, 
      duration: 1, 
      ease: 'power2.out'
    });
  };

  return (
    <div>
      <div ref={boxRef} className="box"></div>
      <button onClick={handleAnimate}>动画</button>
      <button onClick={handleReset}>重置</button>
    </div>
  );
}

4. React Spring

基于物理引擎的动画库，适合需要自然惯性效果的场景。通过 Hook 管理状态，响应式更新非常顺滑。

// App.jsx
import React, { useState } from 'react';
import { useSpring, animated } from '@react-spring/web';

function App() {
  const [animate, setAnimate] = useState(false);

  const styles = useSpring({
    x: animate ? 200 : 0,
    opacity: animate ? 0.5 : 1,
    height: animate ? 200 : 100,
    width: animate ? 200 : 100,
    config: { duration: 1000 }
  });

  return (
    <div>
      <animated.div className="box" style={styles} />
      <button onClick={() => setAnimate(!animate)}>
        {animate ? '重置' : '动画'}
      </button>
    </div>
  );
}

总结

现代前端动画的核心在于利用硬件加速和声明式编程。CSS 负责简单过渡，JS 库处理复杂逻辑。告别 jQuery animate 不仅是技术栈的升级，更是为了追求更流畅的用户体验和维护效率。