5個最佳React動畫庫
英文 | https://betterprogramming.pub/the-5-best-animation-libraries-for-react-8dc5a8bc2abe
翻譯 | 楊小二
1、Remotion
允許你使用常見的網(wǎng)絡(luò)技術(shù)（例如HTML，CSS，JavaScript，TypeScript等）創(chuàng)建動畫。 不需要有關(guān)視頻編輯的其他知識。 提供React功能，例如可重復(fù)使用的組件，強(qiáng)大的合成功能和快速重新加載功能。 Remotion Player給你真正的視頻編輯器的感覺。 Remotion Player可用于使用瀏覽器播放和查看視頻。
2、Framer Motion
地址：https://www.framer.com/
為基于物理的高級動畫提供幫助。 Motion API可以自動生成動畫，你只需要配置正確的設(shè)置值即可。 支持手勢識別喜歡hover，tap，pan，和drag。 支持服務(wù)器端渲染。 易于更改和操縱顏色。 好的文檔，易于學(xué)習(xí)。 支持TypeScript。
yarn add framer-motionOrnpm install framer-motion
而且，F(xiàn)ramer Motion中包含三個類型的軟件包：免費，專業(yè)版（每月20美元）和自定義軟件包，你可以根據(jù)自己的需求選擇最合適的一種。
3、React Motion
地址：https://github.com/chenglou/react-motion#readme
React Motion是另一個流行的React庫，可讓你輕松創(chuàng)建逼真的動畫。主要是，它提供了五種不同的組件：spring， Motion，StaggeredMotion，TransitionMotion，和presets。他們每個人都有一個獨特的目的：
spring —輔助功能，用于指導(dǎo)零部件的動畫制作。
presets —預(yù)定義的動畫對象。
Motion —用于對組件進(jìn)行動畫處理的組件。
StaggeredMotion —用于對動畫相互依賴的組件進(jìn)行動畫處理的組件。
TransitionMotion —用于對組件的安裝和卸載進(jìn)行動畫處理的組件。
除了這五個專用的導(dǎo)出外，在使用React Motion之前，還需要研究許多內(nèi)容，因為它比我們之前討論過的其他庫要復(fù)雜得多。他們提供了功能齊全的示例文件，我建議你首先閱讀它們。
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，它是一個基于彈簧物理的動畫庫。它輕松滿足了我們大多數(shù)與UI相關(guān)的現(xiàn)代動畫需求。
而且，它具有高度的靈活性，并且繼承了我們前面討論過的React Motion的某些屬性。因此，讓我們看一下使React Spring如此特別的地方：
提供了鉤子來處理各種情況（useChain，useSpring， useSprings，useTrail，useTransition）。
能夠應(yīng)用動畫而無需依賴React來逐幀渲染更新。
Jest支持測試。
精心編寫且對初學(xué)者友好的文檔。
支持Web和React-native應(yīng)用程序。
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創(chuàng)建數(shù)據(jù)驅(qū)動的動畫。它可以用于實現(xiàn)各種動畫和過渡。自定義推文功能是最突出的功能。
除此之外：
它支持React，React Native和React-VR。
它具有對延遲，持續(xù)時間和緩動的細(xì)粒度控制。
提供動畫生命周期事件。
它支持TypeScript。
比React Motion更簡單。
除此之外，React Move每周有超過95K的npm下載，目前總共有6.3K GitHub stars。
你可以使用npm輕松安裝它：
npm install react-move結(jié)論
在本文中，我介紹了5個可與React一起使用的動畫庫。雖然很多其他庫也可以達(dá)到這個相同的目的。
因此，如果你使用了其他動畫庫，請在評論部分與我們分享你的想法。如果你沒有嘗試本文中列出的任何一種，我強(qiáng)烈建議你至少嘗試其中一種。
感謝你的閱讀！
學(xué)習(xí)更多技能
請點擊下方公眾號
