为什么你应该使用 Framer Motion

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

Framer Motion是什么？

与其说Framer Motion是一个全新的动画库，不如说它更像是对现有动画库的改进或重新发明。

Framer Motion 是Pose的继任者，Pose 曾是 React 中最流行的动画库之一。与 Pose 一样，Framer Motion 也基于 Promotion 构建，Promotion 是一个底层、非预设风格的动画库，但 Framer Motion 提供了抽象层来简化流程。

Framer Motion 对 API 进行了改进和简化，而这在不进行重大更改和重写代码的情况下是无法实现的。其中一个区别是，Framer Motion 仅支持 React，而 Pose 同时支持 React Native 和 Vue。如果您目前正在使用 Pose，我建议您升级到 Framer Motion，因为 Pose 已被弃用。

为什么要使用 Framer Motion？

1. 如果大多数动画库都使用基于弹簧的动画，那么为什么要使用 Framer Motion 呢？首先，它拥有简洁易用的 API，不会给你的组件增加额外的代码。在大多数情况下，你可以直接将 HTML 元素替换为 motion 元素——例如，将 `div` 替换为 `motion.div`，这样得到的标记相同，但增加了用于动画的属性。

2. Framer Motion 能够为原型设计工具 Framer X 提供动画支持，这使得交付流程极其便捷。大多数设计师都曾遇到过这样的情况：花费大量时间精心打磨设计的每一个细节，却在开发过程中功亏一篑。Framer Motion 允许您在原型设计和生产阶段使用同一套动画库。这样，您就无需担心动画效果与预期不符。

我该如何开始？

1. 安装 Framer Motion 软件包。

npm install framer-motion（如果您正在使用npm）
或
yarn add framer-motion（如果您正在使用yarn）

1. 将组件导入motion到您的文件中。

import { motion } from 'framer-motion';

1. 尝试使用该animate属性为元素添加动画效果。

⚠️ 请注意：您没有使用任何额外的css语法或属性，它们都来自 Framer Motion。

export default function App() {
  return (
    <motion.h2
      animate={{ scale: 1.2 }}
    >
      Yayy, I am animated!!
    </motion.h2>
  )
}

您可以注意到两件重要的事情：

1. motion始终位于 HTML 标签之前（只需查看文档确认Framer Motion 是否支持即可）

2. animate属性传递一个对象（例如style={{}}）

   1. 请查看我的Framer Motion 代码库，了解它的工作原理。
   2. 请观看YouTube上关于Framer Motion的播放列表。

参考

LogRocket
中等