2023年值得推薦的3個React動畫庫及思考

大豬蹄子研究院

遺落在人間努力coding的有趣靈魂。

關注4 人贊同了該文章

1. react spring

這是react官網提到的三個動效庫之一，還有兩個是react-transition-group和react-motion，後面我們會講到，目前有19.1k的star，和react-motion部分伯仲。

這是乙個基於彈簧物理學的動畫庫，基本上能滿足大多數與ui相關的動畫需求，繼承了animated強大的插值和效能，以及react-motion的易用性。

同時，它提供了hooks和render-props（spring，transitio，keyframes，parallax等）兩種api。

2. react transition group

這是乙個全面的動效庫，截止目前有著8k的stars，它提供宣告式的api 給mounting掛載和unmounting解除安裝的元件，它顯示乙個元件到另乙個元件的動效有4個元件，分別是：

3. react motion

它建立的動畫看起來很自然，而且融合了一些物理學的東西，給人的感覺會更加真實。目前有著19.3k的stars，由此可見其受歡迎程度。它則使用以下api來實現（motion也是運動的意思）：

對react-spring的一些思考

animated的乙個優點是，它可以直接應用動畫，而不需要依賴react一幀一幀地渲染更新，就像其他react動畫庫一樣。因此，react-spring受益於動畫巧妙的渲染模型。

在簡單的情況下，差異可能不明顯，但是如果嘗試巢狀圖表，react將會占用cpu資源，阻塞瀏覽器的幀預算。

在react之外應用更新有嚴格的限制，因為一般的react元件在dom中沒有表示，所以只能動畫化dom原生樣式和屬性，但在這裡，你可以通過提供native標誌在這兩種模型中進行選擇。

動畫也可以處理完全本地的驅動程式，所以在未來，如果web動畫獲得更多的支援，它甚至可以在合成執行緒中完成所有的動畫。但現在，react-spring可以與gsap和d3相比，後者也可以在requestanimationframe迴圈中進行動畫。

當前的宣告式原生已經足夠了嗎？

對於大多數ui相關的任務來說，也許是這樣，但是對於任何涉及到分段和編排的任務來說——這可能還不夠。

缺少命令式動畫有時會造成傷害，目前大多數庫中最困難的一點就是在原語之間切換，例如先用spring移動某個東西，拖拽它的元素到適當的位置，然後過渡新增和刪除。正如您可以想象的那樣，宣告式地執行此操作幾乎是徒勞的，因為這將意味著對**進行分割。這就是傳統漸變庫的亮點所在。

儘管react-spring目前仍處於高度的試驗階段，但它已經在尋找混合指令碼和組合的方法，這可能會在鏈結和編配方面提供更多的自由。

總結看了一圈發現，這些都是react官方比較推薦的庫，你用過哪些呢？又有怎樣的思考？

發布於 2021-01-11 08:00