用 Framer Motion 打造流畅的动画体验

为什么选择 Framer Motion？

在众多 React 动画库中，Framer Motion 以其声明式 API 和强大的功能脱颖而出。它让复杂的动画变得简单直观。

基础：motion 组件

Framer Motion 的核心是 motion 组件。只需将普通的 HTML 元素替换为 motion 版本：

import { motion } from "framer-motion";

function Card() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ scale: 1.05 }}
    >
      Hello, Animation!
    </motion.div>
  );
}

Spring 物理动画

Spring 动画让运动更自然：

const springConfig = {
  type: "spring",
  stiffness: 100,
  damping: 20,
};

<motion.div animate={{ x: 100 }} transition={springConfig} />;

Variants：复用动画状态

当你有多个元素需要协调动画时，variants 是最佳选择：

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const item = {
  hidden: { y: 20, opacity: 0 },
  show: { y: 0, opacity: 1 },
};

实战：页面转场

在 Next.js App Router 中实现页面转场：

// app/template.tsx
"use client";

import { motion } from "framer-motion";

export default function Template({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -8 }}
    >
      {children}
    </motion.div>
  );
}

总结

Framer Motion 让动画开发变得愉快。记住这几点：

• 从简单的 initial 和 animate 开始
• 使用 Spring 让动画更自然
• 用 Variants 管理复杂状态
• 性能优先，只动画 transform 和 opacity

Happy animating! 🎬