共计 2173 个字符，预计需要花费 6 分钟才能阅读完成。
用户体验是古代 Web 应用程序中的次要问题之一。设计师将各种成果增加到 Web 应用程序的 UI 设计中，以吸引更多的用户。作为开发人员，咱们必须足够熟练地交付他们冀望的产品。
然而，有时候，技能并不是咱们惟一须要的。咱们还应该意识到咱们能够应用的工具和库。在本文中，我将分享 5 个可用于向你的 React 我的项目增加动画的库。
1、Remotion
Remotion，它是 2021 年初引入的一个令人兴奋的库，你能够应用它创立动画和视频。以下是其一些值得关注的性能：
容许你应用常见的网络技术（例如 HTML，CSS，JavaScript，TypeScript 等）创立动画。
不须要无关视频编辑的其余常识。
提供 React 性能，例如可重复使用的组件，弱小的合成性能和疾速从新加载性能。
Remotion Player 给你真正的视频编辑器的感觉。
Remotion Player 可用于应用浏览器播放和查看视频。
Remotion 在 GitHub 上有大概 7K stars，最重要的是，它是收费供集体应用的。
应用 Remotion 之前，应先装置 Node.js 和 FFmpeg。而后，你须要将 FFmpeg 提取到任何文件夹，并将其门路设置为零碎变量。
装置完上述依赖项后，你能够通过运行 yarn create video 或创立第一个 Remotion 我的项目 npm init video。
2、Framer Motion
Framer Motion 是你应该关注的另一个风行的 React 动画库。它是两个 API（Framer API 和 Motion API）的组合。
Framer 库为 Web 和挪动应用程序提供疾速的交互性和原型设计性能，而 Motion 库提供动画和手势。
除此之外，还有很多理由对此感到兴奋：
为基于物理的高级动画提供帮忙。
Motion API 能够主动生成动画，你只须要配置正确的设置值即可。
反对手势辨认喜爱 hover，tap，pan，和 drag。
反对服务器端渲染。
易于更改和操纵色彩。
好的文档，易于学习。
反对 TypeScript。
Framer Motion 在 GitHub 上已有超过 11K stars 和 NPM 超过 490K 周下载量。
你能够应用 npm 或 yarn 来装置 Framer Motion：
yarn add framer-motion
Or
npm install framer-motion
而且，Framer Motion 中蕴含三个类型的软件包：收费，专业版（每月 20 美元）和自定义软件包，你能够依据本人的需要抉择最合适的一种。
3、React Motion
React Motion 是另一个风行的 React 库，可让你轻松创立真切的动画。次要是，它提供了五种不同的组件：spring，Motion，StaggeredMotion，TransitionMotion，和 presets。他们每个人都有一个独特的目标：
spring —辅助性能，用于领导零部件的动画制作。
presets —预约义的动画对象。
Motion —用于对组件进行动画解决的组件。
StaggeredMotion —用于对动画相互依赖的组件进行动画解决的组件。
TransitionMotion —用于对组件的装置和卸载进行动画解决的组件。
除了这五个专用的导出外，前端培训在应用 React Motion 之前，还须要钻研许多内容，因为它比咱们之前探讨过的其余库要简单得多。他们提供了功能齐全的示例文件，我倡议你首先浏览它们。
React Motion 每周有超过 650K 的 npm 下载，以及大概 1.9 万个 GitHub stars。
如果要应用它，能够应用 npm 或 yarn 装置它：
yarn add react-motion
Or
npm i react-motion
4、React-Spring
排在第四位的是 react-spring，它是一个基于弹簧物理的动画库。它轻松满足了咱们大多数与 UI 相干的古代动画需要。
而且，它具备高度的灵活性，并且继承了咱们后面探讨过的 React Motion 的某些属性。因而，让咱们看一下使 React Spring 如此特地的中央：
提供了钩子来解决各种状况（useChain，useSpring，useSprings，useTrail，useTransition）。
可能利用动画而无需依赖 React 来逐帧渲染更新。
Jest 反对测试。
精心编写且对初学者敌对的文档。
反对 Web 和 React-native 应用程序。
React-spring 在 GitHub 上领有超过 2 万个 stars，每周下载量超过 67.5 万次。
相似于本文中的所有其余库，你能够应用 npm 或 yarn 轻松装置 react-spring：
yarn add react-spring
Or
npm install react-spring
5、React Move
React Move 是一个简略的库，可让你应用 React 创立数据驱动的动画。它能够用于实现各种动画和过渡。自定义推文性能是最突出的性能。
除此之外：
它反对 React，React Native 和 React-VR。
它具备对提早，持续时间和缓动的细粒度管制。
提供动画生命周期事件。
它反对 TypeScript。
比 React Motion 更简略。
除此之外，React Move 每周有超过 95K 的 npm 下载，目前总共有 6.3K GitHub stars。
你能够应用 npm 轻松装置它：
npm install react-move