Motion（Framer Motion 动画库）

Motion（原名 Framer Motion）是一款广受欢迎的声明式动画库，最初面向 React 设计，让开发者用简洁直观的方式为界面添加过渡、手势与布局动画。

概述

该库由 Framer 团队开发并开源，早期名为 Framer Motion，后逐步演进并推出面向更广泛 Web 场景的版本。它的核心理念是声明式：开发者只需描述动画的起止状态与过渡方式，库便负责计算每一帧，屏蔽了底层动画调度的复杂性。

核心特点

• 声明式动画：通过为元素指定初始、目标与退出状态，即可完成进入、变化与离开的动画。
• 手势支持：内置拖拽、悬停、点击等手势识别，可轻松实现交互驱动的动画效果。
• 布局动画：当元素在页面中的位置或尺寸发生变化时，能自动生成平滑的过渡，无需手动计算。
• 基于弹簧：支持弹簧物理模型，动画更自然，也支持传统的缓动曲线。

应用场景

Motion 常用于页面切换过渡、列表增删动画、模态框弹出、交互式卡片与微交互等场景。它在设计感较强的营销页面与产品界面中尤为常见，能以较低成本实现流畅、精致的动效，提升用户体验。

常见问题

问：Motion 只能在 React 中使用吗？答：其最成熟的能力面向 React，但该项目也提供了可用于更广泛 Web 环境的动画接口，具体能力取决于所选版本与用法。

问：大量动画会影响性能吗？答：合理使用时性能良好，库会尽量利用高效的属性做动画。但若同时驱动过多元素或频繁触发布局动画，仍需关注渲染开销并做优化。