Framer Motion 生态详解 | 前端技术导航

核心特性

Framer Motion 的设计哲学和关键技术特性

🎯 声明式API

简单的属性配置即可实现复杂动画，无需编写动画逻辑

🚀 物理动画

内置弹簧、惯性等物理动画引擎，动画更自然

🔄 布局动画

自动布局动画，无需手动计算位置变化

👋 手势支持

内置拖拽、点击、悬停等手势识别

📱 退出动画

组件卸载时的退出动画，体验更流畅

⚡ 性能优化

硬件加速，60fps流畅动画

生态系统

Framer Motion 核心扩展和官方工具

Motion One

轻量级动画库，支持所有框架

轻量级框架无关

Framer

可视化网站构建工具，内置Motion动画

设计工具可视化

React Spring

基于物理的动画库，与Motion互补

物理动画 React

AutoAnimate

零配置动画库，自动添加过渡效果

零配置自动

快速入门

# 安装Framer Motion
npm install framer-motion

# 基础用法
import { motion } from "framer-motion"

function App() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      Hello Framer Motion!
    </motion.div>
  )
}

配置示例

// 动画变体
const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: {
      duration: 0.5,
      ease: "easeOut"
    }
  },
  hover: {
    scale: 1.05,
    transition: { duration: 0.2 }
  }
}

// 列表动画
const listVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
}

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: { opacity: 1, x: 0 }
}

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

// 布局动画
function LayoutAnimation() {
  const [isOpen, setIsOpen] = useState(false)
  
  return (
    <motion.div layout>
      <motion.button onClick={() => setIsOpen(!isOpen)}>
        Toggle
      </motion.button>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            layout
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
          >
            Content
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}

Framer Motion