Framer Motion 完全教程 – React 动画完全指南

Framer Motion 简介

Framer Motion 是 Framer 出品的 React 动画库，以声明式 API 著称。它让创建复杂动画变得简单，是 React 项目做动画的首选。

安装

npm install framer-motion

基础动画

import { motion } from 'framer-motion'

function Box() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
    />
  )
}

常用动画属性

x, y          // 位置
scale          // 缩放
rotate         // 旋转
opacity        // 透明度
backgroundColor // 背景色

// 支持 CSS 属性
width, height, borderRadius, margin, padding

变体动画（Variants）

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

function AnimatedList() {
  return (
    <motion.ul variants={variants} initial="hidden" animate="visible">
      {items.map(item => <motion.li key={item}>{item}</motion.li>)}
    </motion.ul>
  )
}

手势动画

function Draggable() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  )
}

拖拽

// 自由拖拽
<motion.div drag>

// 限制拖拽范围
<motion.div
  drag
  dragConstraints={{ left: -100, right: 100 }}
  dragElastic={0.1}
/>

// 拖拽吸附
<motion.div
  drag
  dragConstraints={constraintsRef}
/>

页面转场

import { AnimatePresence } from 'framer-motion'

function App() {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={page}
        initial={{ opacity: 0, x: 100 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: -100 }}
        transition={{ duration: 0.3 }}
      />
    </AnimatePresence>
  )
}

列表动画

const list = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
}

const item = {
  hidden: { opacity: 0, x: -10 },
  visible: { opacity: 1, x: 0 }
}

function List() {
  return (
    <motion.ul variants={list} initial="hidden" animate="visible">
      {items.map(i => (
        <motion.li key={i} variants={item}>{i}</motion.li>
      ))}
    </motion.ul>
  )
}

Layout 动画

function LayoutAnimation() {
  const [expanded, setExpanded] = useState(false)
  
  return (
    <motion.div
      layout
      onClick={() => setExpanded(!expanded)}
      style={{ backgroundColor: '#fff' }}
    >
      <motion.div layout>Content</motion.div>
    </motion.div>
  )
}

滚动动画

function ScrollAnimation() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true, margin: "-100px" }}
    >
      Scroll to see me!
    </motion.div>
  )
}

动画控制

function ControlledAnimation() {
  const controls = useAnimationControls()
  
  return (
    <div>
      <motion.div animate={controls} />
      <button onClick={() => controls.start({ x: 100 })}>
        Move
      </button>
    </div>
  )
}

总结

Framer Motion 是 React 动画的最佳选择。它的声明式 API 让复杂动画变得简单，文档完善，社区活跃。建议所有 React 项目都使用 Framer Motion。