5个最佳React动画库
共 2745字，需浏览 6分钟
· 2021-05-16
英文 | https://betterprogramming.pub/the-5-best-animation-libraries-for-react-8dc5a8bc2abe
翻译 | 杨小二
1、Remotion
允许你使用常见的网络技术（例如HTML，CSS，JavaScript，TypeScript等）创建动画。 不需要有关视频编辑的其他知识。 提供React功能，例如可重复使用的组件，强大的合成功能和快速重新加载功能。 Remotion Player给你真正的视频编辑器的感觉。 Remotion Player可用于使用浏览器播放和查看视频。
2、Framer Motion
地址：https://www.framer.com/
为基于物理的高级动画提供帮助。 Motion API可以自动生成动画，你只需要配置正确的设置值即可。 支持手势识别喜欢hover，tap，pan，和drag。 支持服务器端渲染。 易于更改和操纵颜色。 好的文档，易于学习。 支持TypeScript。
yarn add framer-motionOrnpm install framer-motion
而且，Framer Motion中包含三个类型的软件包：免费，专业版（每月20美元）和自定义软件包，你可以根据自己的需求选择最合适的一种。
3、React Motion
地址：https://github.com/chenglou/react-motion#readme
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-motionOrnpm i react-motion
4、React-Spring
地址：https://github.com/pmndrs/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-springOrnpm install react-spring
5、React Move
地址：https://react-move-docs.netlify.app
React Move是一个简单的库，可让你使用React创建数据驱动的动画。它可以用于实现各种动画和过渡。自定义推文功能是最突出的功能。
除此之外：
它支持React，React Native和React-VR。
它具有对延迟，持续时间和缓动的细粒度控制。
提供动画生命周期事件。
它支持TypeScript。
比React Motion更简单。
除此之外，React Move每周有超过95K的npm下载，目前总共有6.3K GitHub stars。
你可以使用npm轻松安装它：
npm install react-move结论
在本文中，我介绍了5个可与React一起使用的动画库。虽然很多其他库也可以达到这个相同的目的。
因此，如果你使用了其他动画库，请在评论部分与我们分享你的想法。如果你没有尝试本文中列出的任何一种，我强烈建议你至少尝试其中一种。
感谢你的阅读！
学习更多技能
请点击下方公众号
