Next.js动画效果[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

Next.js动画效果是指在Next.js框架中实现动态视觉过渡的技术，用于提升用户体验和界面交互性。动画可以应用于页面切换、组件渲染、悬停效果等场景，支持CSS动画、JavaScript动画库（如Framer Motion）以及原生Web Animations API等多种实现方式。

核心实现方法[编辑 | 编辑源代码]

CSS动画[编辑 | 编辑源代码]

通过CSS的@keyframes或transition实现基础动画效果。示例：

/* styles/globals.css */
.fadeIn {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

在组件中应用：

export default function AnimatedComponent() {
  return <div className="fadeIn">内容淡入效果</div>;
}

Framer Motion库[编辑 | 编辑源代码]

Framer Motion是Next.js推荐的动画库，提供声明式API：

npm install framer-motion

示例代码：

import { motion } from 'framer-motion';

export default function Button() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      点击动画
    </motion.button>
  );
}

页面过渡动画[编辑 | 编辑源代码]

使用Next.js路由事件和Framer Motion实现：

// pages/_app.js
import { AnimatePresence } from 'framer-motion';

function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={router.route}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      >
        <Component {...pageProps} />
      </motion.div>
    </AnimatePresence>
  );
}

性能优化[编辑 | 编辑源代码]

动画性能对比
方法	适用场景	GPU加速
CSS动画	简单效果	是
JavaScript动画	复杂交互	部分支持
WebGL	3D动画	完全支持

实际案例[编辑 | 编辑源代码]

电商产品卡片悬停效果：

import { motion } from 'framer-motion';

const ProductCard = () => (
  <motion.div 
    whileHover={{ y: -10, boxShadow: "0 10px 20px rgba(0,0,0,0.1)" }}
    transition={{ type: "spring", stiffness: 300 }}
  >
    <img src="/product.jpg" />
    <h3>商品名称</h3>
  </motion.div>
);

数学原理[编辑 | 编辑源代码]

缓动函数常用二次贝塞尔曲线表示： $B (t) = (1 - t)^{2} P_{0} + 2 (1 - t) t P_{1} + t^{2} P_{2}$ 其中 $t \in [0, 1]$ ， $P_{0}$ 和 $P_{2}$ 为端点， $P_{1}$ 为控制点。

常见问题[编辑 | 编辑源代码]

Q: 动画导致布局偏移怎么办？

 A: 使用transform代替width/height变化

Q: 如何检测动画结束？

 A: 使用onAnimationEnd事件或Framer Motion的onUpdate回调

进阶技巧[编辑 | 编辑源代码]

使用useReducedMotion hook适配无障碍需求
结合SVG实现路径动画
服务端渲染时通过CSS变量传递初始状态

参见[编辑 | 编辑源代码]