Motion (Framer Motion)

项目概述

Motion（原著名开源库 Framer Motion）是 React 与现代 Web 开发中无可争议的工业级声明式动效与手势库。由 Matt Perry 倾力打造，它将复杂的物理弹簧动效（Spring Physics）、布局自动平滑过渡（Layout Morphing）、手势拖拽与滚动联动变得极其直观与优雅。

全球顶尖的科技官网、SaaS 交互界面及 Magic UI 等动效库均深度依赖其强大的动画引擎。

核心特性

• 🌊 声明式物理弹簧引擎：支持真实物理质量、阻尼与刚度参数，模拟自然流畅的交互惯性。
• 📐 神奇的布局自动形变（`layout`）：只需添加 layout 属性，即可自动计算并在不同 DOM 尺寸/位置间实现丝滑过渡。
• 👆 完备的手势交互系统：原生支持 Hover、Tap、Pan（平移）、Drag（自由拖拽）与吸附。
• 📜 强大的滚动驱动动画：通过 useScroll 与 useTransform 轻松实现视差滚动与进度联动。

快速上手与示例代码

npm install motion

声明式交互示例

import React from 'react';
import { motion } from "motion/react";

export default function Demo() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.05, y: -2 }}
      whileTap={{ scale: 0.95 }}
      className="p-6 bg-primary text-primary-foreground rounded-2xl shadow-lg cursor-pointer font-medium"
    >
      悬停或点击体验物理动效
    </motion.div>
  );
}

技术选型建议与适用场景

• 非常适合：追求极致交互质感的 React / Next.js 产品、交互丰富的营销落地页、卡片折叠/展开过渡及手势操作界面。
• 不适用场景：对包体积有严苛限制（仅需简单 CSS Keyframes）、或不需要任何复杂状态过渡的纯文本阅读类网站。