前端动画：别再用 jQuery animate 了
前端动画：别再用 jQuery animate 了
毒舌时刻
这动画效果做得跟幻灯片似的，一点都不流畅。
各位前端同行，咱们今天聊聊前端动画。别告诉我你还在使用 jQuery animate，那感觉就像在没有减震器的情况下开车——能开，但颠簸得要命。
为什么你需要现代前端动画
最近看到一个项目，动画效果卡顿，代码复杂难以维护。我就想问：你是在做动画还是在做卡顿展示？
反面教材
// 反面教材：使用 jQuery animate // index.html <!DOCTYPE html> <html> <head> <title>jQuery Animation</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .box { width: 100px; height: 100px; background-color: red; position: relative; } </style> </head> <body> <div></div> <button>动画</button> <script src="app.js"></script> </body> </html> // app.js $(document).ready(function() { $('#animate').click(function() { $('.box').animate({ left: '200px', opacity: '0.5', height: '200px', width: '200px' }, 1000); }); }); 毒舌点评：这动画，就像在看幻灯片，一点都不流畅。
正确姿势
1. CSS 动画
/* 正确姿势：CSS 动画 */ /* styles.css */ .box { width: 100px; height: 100px; background-color: red; position: relative; transition: all 0.3s ease; } .box:hover { transform: scale(1.2); background-color: blue; } .box.animate { animation: move 1s ease forwards; } @keyframes move { from { left: 0; opacity: 1; height: 100px; width: 100px; } to { left: 200px; opacity: 0.5; height: 200px; width: 200px; } } /* index.html */ <!DOCTYPE html> <html> <head> <title>CSS Animation</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div></div> <button>动画</button> <script src="app.js"></script> </body> </html> /* 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
// 正确姿势：Framer Motion // 1. 安装依赖 // npm install framer-motion // 2. 基本使用 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> ); } export default App; // styles.css .box { background-color: red; position: relative; } 3. GreenSock Animation Platform (GSAP)
// 正确姿势：GSAP // 1. 安装依赖 // npm install gsap // 2. 基本使用 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> ); } export default App; // styles.css .box { width: 100px; height: 100px; background-color: red; position: relative; } 4. React Spring
// 正确姿势：React Spring // 1. 安装依赖 // npm install @react-spring/web // 2. 基本使用 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> ); } export default App; // styles.css .box { background-color: red; position: relative; } 毒舌点评：这才叫现代前端动画，流畅自然，代码简洁，再也不用担心动画卡顿和维护困难了。