编辑“︁Next.js动画效果”︁（章节）

= Next.js动画效果 =

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

== 核心实现方法 ==

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

<syntaxhighlight lang="css">
/* styles/globals.css */
.fadeIn {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</syntaxhighlight>

在组件中应用：
<syntaxhighlight lang="jsx">
export default function AnimatedComponent() {
  return <div className="fadeIn">内容淡入效果</div>;
}
</syntaxhighlight>

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

<syntaxhighlight lang="bash">
npm install framer-motion
</syntaxhighlight>

示例代码：
<syntaxhighlight lang="jsx">
import { motion } from 'framer-motion';

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

=== 页面过渡动画 ===
使用Next.js路由事件和Framer Motion实现：

<syntaxhighlight lang="jsx">
// 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>
  );
}
</syntaxhighlight>

== 性能优化 ==
{| class="wikitable"
|+ 动画性能对比
! 方法 !! 适用场景 !! GPU加速
|-
| CSS动画 || 简单效果 || 是
|-
| JavaScript动画 || 复杂交互 || 部分支持
|-
| WebGL || 3D动画 || 完全支持
|}

<mermaid>
graph TD
  A[选择动画类型] --> B{复杂度}
  B -->|简单| C[CSS动画]
  B -->|中等| D[Framer Motion]
  B -->|复杂| E[GSAP/Three.js]
</mermaid>

== 实际案例 ==
'''电商产品卡片悬停效果'''：
<syntaxhighlight lang="jsx">
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>
);
</syntaxhighlight>

== 数学原理 ==
缓动函数常用二次贝塞尔曲线表示：
<math>B(t) = (1-t)^2P_0 + 2(1-t)tP_1 + t^2P_2</math>
其中<math>t \in [0,1]</math>，<math>P_0</math>和<math>P_2</math>为端点，<math>P_1</math>为控制点。

== 常见问题 ==
* '''Q: 动画导致布局偏移怎么办？'''
  A: 使用<code>transform</code>代替<code>width/height</code>变化
* '''Q: 如何检测动画结束？'''
  A: 使用<code>onAnimationEnd</code>事件或Framer Motion的<code>onUpdate</code>回调

== 进阶技巧 ==
* 使用<code>useReducedMotion</code> hook适配无障碍需求
* 结合SVG实现路径动画
* 服务端渲染时通过CSS变量传递初始状态

== 参见 ==
* [[React动画原理]]
* [[Web性能优化指南]]
* [[CSS硬件加速]]

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js样式解决方案]]