用于 React 的 Framer Motion API

博览会。

我们都经历过这种感觉。看着无数网页上那些精美的动画，看着自己写的 CSS，叹息着自己花了几个小时画的线框，还在谷歌上搜索如何让 div 居中。别误会，这就是你学习的方式，当然，还有 Codepen。🌚

但前端确实很重要。有人甚至认为它和 Web 应用的核心后端一样重要。毕竟，它是每个人都能看到的部分，每个人都会观察，会找出错误，会惊叹它的美，也会对它的设计嗤之以鼻。这就引出了 Framer。一款用于前端设计和动画的在线免费原型设计工具……

...无需编写任何代码。

呃，不，谢谢你。

不过，值得庆幸的是，他们的 React Motion API 已经作为 NPM 包开源了，你可以将它与 CSS 结合使用，根据需要为各种组件添加动画效果。（嘿，我说的是更好的动画效果，而不是更少的工作量。）

为此，您需要一个基于 React 的项目。所以，Vue 和 Angular 组合，Facebook 的“帽子”又加了一层。

展望未来，这不是 Vue 与 Angular 与 React 之间的争论，该争论已多次“尘埃落定”，甚至不再具有现实意义。

那么， Framer Motion API到底是什么？它能完成 CSS 做不到的事情吗？

不。

那么，它不是没用的吗？不是的。

重要的不是做了什么，而是做得有多快、多容易，甚至效率有多高。不要引用我们的话，大多数 API/框架都是这样理解的。

面对现实吧，如果我们按照这些定义去做，大多数新的 JavaScript 框架将变得毫无用处。（大多数都是。）

创建你的反应项目。

首先，前往终端安装 npm 包，然后

npm install framer-motion

然后按 Enter。

Framer Motion API 的工作方式非常简单。您可以根据需要，从 framer-motion npm 包中导入 motion 组件，并将其添加到页面或组件文件中。

import {motion} from "framer-motion"

然后你可以声明运动组件而不是经典的 HTML/JSX 组件。例如，

<motion.div/>

而不是

<div/>

所有这些替代组件都带有许多可配置的值，用于动画、转换，甚至硬编码的内联 CSS，甚至 GPU 加速图形。

检查这个稍微加速的开关。

或者这个依赖滚动的动画......

或者将这个变形物体作为您的品牌标识。

是不是简洁多了？最后一个沙盒中的 Example.tsx 只有 21 行代码。

现在，这很简洁。

再次强调，我们并非说 Framer 在线工具不好。但我们主要讨论的是代码。如果有人能够凭借对经典样式的精通，创作出令人惊叹的视觉效果，那真是值得称赞。但其 API 能让许多开发者创造出精美绝伦的作品，甚至可以说是神奇。

而从根本上来说，这就是它的意义所在。

请在这里查看：

这里有 API 文档。

希望您觉得本文对您有所帮助。
欢迎访问我们的网站了解更多信息，并关注我们的平台：

也不要忘记点赞和评论。

在那之前，
请保持安全，愿源头与你同在！