2019年，實現 React 動畫的 5 種最經常使用方式

動畫是 ReactJs 應用程序中一個熱門話題，咱們有不少方法能夠建立不一樣類型的動畫。例如，不少開發人員就喜歡使用 css 動畫。但若是你想建立更復雜的動畫，你能夠關注 GreenSock 。GreenSock 是最具影響力的動畫平臺，同時，它給 React 提供了不少用於建立動畫的庫或組件。

接下來，進入主題 😎。

1. CSS 動畫
2. React-transition-group - 它是一個附加組件，用於實現基本的 CSS 動畫和過渡動畫。
3. react-animations - React-animations 實現 animate.css 的全部動畫，且簡單易用！
4. **React Reveal -**這是 React 的動畫框架。
5. TweenOne - ant.design 裏用於動畫的庫

........................ ...👇 要查看回購，請單擊此處。👈 ...........................👆

固然，還有不少開源的動畫庫和組件，可是這篇文章不會涉及這些庫。

👨💻讓咱們開始吧。

1、CSS 方法

這種方法是實現動畫的最簡單、最基礎的方式。你不須要導入 JavaScript 庫，而且瀏覽器花費的資源也是最少的。若是你須要實現一個簡單的動畫，並擔憂包的大小，可使用此方法。

那麼，如何使用 css 作動畫喃？ 咱們來看看左側菜單欄示例：👇

這裏使用 css 屬性和 className="is-nav-open" 標籤實現側邊欄動畫。

CSS 有不少方法實現該效果，其中之一是在導航組件上建立一個容器組件，並在點擊時觸發 margin 的更改。導航欄有固定的寬度 250px ，容器組件的 margin-left 或 translateX 也擁有相同寬度。當咱們須要顯示導航欄時，咱們須要給容器組件設置 className="is-nav-open" 而且移動容器組件 margin-left/translateX: 0;

和 CSS 樣式：

在大多數狀況下，咱們都會使用 CSS 來建立動畫，由於它不須要在項目中導入大型庫來實現動畫，一般幾行 css 以及 className 標籤就能實現。

2、 ReactTransitionGroup

它是由 ReactJs 社區的人員開發的。ReactTransitionGroup 很容易實現基本的 CSS 動畫和過渡動畫。

開發人員將此庫描述爲：

「用於管理組件狀態（包括安裝和卸載）的一組組件，特別爲動畫而設計的。」

不管如何，關於它須要瞭解三件事：

• 當組件生命週期發生更改時，React Transition Group 會更改類。因此，應該在 CSS 上設置動畫樣式。
• ReactTransitionGroup 的包很小。在 React 應用程序中安裝它，並不會顯著增長項目包的體積。但你可使用 CDN 。
• ReactTransitionGroup有 3 個組件（Transition，CSSTransition 和 TransitionGroup ）。爲了得到動畫，你須要將組件包裹在這 3 個類中。

讓咱們來看看如何製做相似的動畫👀👇

首先，你須要導入 CSSTransitionGroup 的 react-transition-group 。

而後你須要將列表包裝在其中並設置 transitionName props。每當 CSSTransitionGroup 添加或刪除子項時，它將得到動畫樣式。

若是設置了 transitionName="example" props，則樣式表中的類應以示例名稱開頭。

這就是 ReactTransitionGroup 的基本用法。👀

這就是你須要的一切。固然，你能夠添加一些邏輯。

咱們用兩種方法來實現咱們的示例聯繫人列表：

handleAdd - 添加新的聯繫人，它得到一個隨機名稱並將其 push 到數組 state.items 。

handleRemove - 經過 state.items 數組中的索引刪除聯繫人。

3、 React-animations

React-animations - 該庫是使用 animate.css 構建的全部動畫。它易於使用，並有不少動畫集合。React-animation 適用於任何支持使用對象定義關鍵幀動畫的內聯樣式庫，例如 Radium，Aphrodite 或樣式組件。我更喜歡使用樣式組件。

你能夠在gif上看到一些動畫：👀👇

我知道你的想法😄

一旦你看到這些動畫，你就會意識到你能夠在哪裏使用它們。 咱們來看看它是如何工做的。例如 - Bounce動畫。

第一件事就是導入動畫所需的 react-animations。

正如我以前提到的，在使用動畫樣式和基本關鍵幀建立容器組件以後，我使用了樣式組件。

建立組件時，你須要包裝任何 HTML 或動畫組件。

例：

這個動畫就實現了，很容易，也很簡單。

這裏介紹一個處理滾動動畫很好的庫 - react-animate-on-scroll。

4、 React-reveal

React Reveal 是 React 的動畫框架。它有如淡入淡出，翻轉，縮放，旋轉之類的基本動畫，也有不少高級動畫。它容許您使用 props 控制全部動畫，例如：位置，延遲，距離，級聯等等。你能夠在這裏看到它們。你還可使用自定義 CSS 效果。

它還具備服務器端渲染和高階組件。

若是你喜歡使用滾動動畫，推薦你使用它，接下里瞭解一下它是如何工做的。

讓咱們看看這個動畫的滾動效果。👀👇

咱們有5大塊，每塊都有一個全屏頁面和一個標題。

咱們創造 animateList ，該數組包含 5 個元素。使用數組方法 map 依次渲染 Fade 組件中的每一個元素併爲其插入標題。

5、TweenOne 和 Ant Design 中的 animation 。

Ant Design 是一個用於構建用戶界面的簡單易用的 React UI 組件庫。Ant Design 由阿里巴巴建立，而且被不少知名品牌使用，例如：阿里巴巴，騰訊，百度等等。

你可能已經據說過 Ant Design，咱們看一下其官網首頁上的動畫

如你所見，其中涉及不少動畫元素。咱們這裏只介紹一個簡單版本，由於全部元素都有相似的動畫。這裏我選擇了地球上的綠球和背景上的一個元素，例如紅色方塊。就像這樣。

在這個動畫中我使用了 TweenOne 組件，由於它須要在動畫中使用路徑，因此我使用了 PathPlugin 。當你將 PathPlugin 推送到 TweenOne.plugins 裏時，就會開啓動畫 。

下一步讓咱們看一下 Basic 動畫參數：

1. **duration -**以毫秒爲單位的動畫
2. ease - 動畫曲線函數，
3. yoyo - 在每次重複動畫中，向前和向後交替。
4. repeat - 重複動畫，你可使用 -1進行無限期處理。
5. p - 動畫的路徑座標
6. easePath - 動畫的緩動路徑座標

看一下樣例：

接下來咱們將建立一個動畫對象。該對象包含 3 種不一樣類型的動畫：

1. redSquare - 它包含循環參數，以及Y座標 y，持續時間 duration 和延遲 delay 。
2. greenBall - 它包含路徑參數 path 、持續時間 duration 、repeat 以及 ease 函數（ TweenOne.easing.path ）， 其中 TweenOne.easing.path 包含兩個參數：
   • path - easePath 座標。
   • lengthPixel - 將分割曲線分爲 lengthPixel 個部分，此例中，將分割曲線分爲 400 份。
3. track - 一個帶有軸的橢圓形，具備循環樣式和旋轉參數。

你無需擔憂此代碼。你必須注意 TweenOne 組件。讓咱們簡單地提醒一下，這些組件都是從 rc-tween-one 中導入的，這個庫被用做基礎 props 和動畫 props 的基本組件。

每個 TweenOne 都有它本身的動畫規則 redSquare，track，greenBall 。

😄看起來嚇人。但事實上，你須要注意這些。

正如你所注意到的，使用此方法建立動畫是一種簡單的方法。你所須要作的只是描述動畫規則，並將它們傳輸到 TweenOne 組件。

🏁結論

常見動畫有不少種，不一樣的動畫咱們能夠採用不一樣的方法。今天咱們就介紹了幾種你能夠在項目中使用的方法。至於具體採用何種方法，須要參考具體場景👨💻

before 你在閱讀本文以前：

after 閱讀本文後：

😄請更優雅的使用動畫吧！

---

👇你還應該閱讀下一篇文章：👇

1. 使用Sentry跟蹤React App中的錯誤
2. 在React JS中實現CSS的9種方法

❤️感謝閱讀

玩得開心，不斷學習，並始終保持編碼。 關注Medium＆Linkedin。

👏喜歡，分享，發表評論

若是你有任何問題或反饋，請點擊閱讀原文👇

下面你能夠看到一組流行的動畫庫列表。

ReactJs庫：

1. react-motion - 解決動畫問題的方案之一。
2. react-spring - 基於 Spring 物理的 React 動畫庫。
3. ant-motion - Ant 設計的 Animate 規範和組件。
4. react-move - 優雅的，基於數據驅動的動畫。
5. react-flight - React 構建動畫的最佳方法。
6. react-flip-move - 使用 FLIP 技術更改 DOM（例如列表從新排序），從而輕鬆實現 動畫 效果。
7. react-burger-menu - 位於屏幕以外的側邊欄組件，它使用 CSS 過渡共話和 SVG 路徑動畫實現。
8. animated - 用於 React 和 React Native 的聲明性動畫庫。
9. react-tween-state - React 動畫。
10. react-animations - 內聯樣式庫的動畫集合。

Javascript庫：

1. GSAP - 適用於現代網絡的超高性能、專業級動畫。
2. Anime.js - Anime.js（/ˈæn.ə.meɪ/）是一個輕量級 JavaScript 動畫庫，具備簡單但功能強大的API。 它適用於 CSS 、SVG、DOM 屬性和 JavaScript 對象。
3. Popmotion - 用於靈活簡單的用戶界面的動畫庫。
4. vivus - 在 SVG 上製做繪圖動畫的 JavaScript 庫。
5. svg.js - 用於操做動畫 SVG 的輕量級庫。
6. velocity - Velocity 是一個動畫引擎，與 jQuery 的 $.animate() 具備相同的 API 。
7. wow - 滾動時顯示動畫，Animate.css 的朋友。
8. dynamic.js - 使用這個 Javascript 庫建立基於物理的動畫。
9. granim.js - 使用這個小的 JavaScript 庫建立流暢的、交互式的漸變更畫。
10. kute.js - KUTE.js 是一個原生的 JavaScript 動畫引擎，具備出色的代碼質量和性能。
11. TweenJs - 一個簡單但功能強大的 Javascript 動畫庫。CreateJS 庫的一部分。
12. moveTo - 一個不依賴任何其它庫的輕量級的 javascript 庫，用於建立滾動動畫。

參考連接

本文翻譯自 medium.com/@dmitrynozh… Dmitry Nozhenko 大大的總結。

系列文章

想看更過系列文章，點擊前往 github 博客主頁

走在最後

1. ❤️玩得開心，不斷學習，並始終保持編碼。👨💻

2. 若有任何問題或更獨特的看法，歡迎評論或直接聯繫瓶子君（公衆號回覆 123 便可）！👀👇

3. 👇歡迎關注：前端瓶子君，每日更新！👇