Animations are important in instances like page transitions, scroll events, entering and exiting components, and events that the user should be alerted to.

動畫在諸如頁面過渡，滾動事件，進入和退出組件以及應提醒用戶的事件之類的實例中很重要。

In this article, we’ll take a look at 5 React animation libraries that can be integrated with React for interactive and attractive web pages.

在本文中，我們將研究5個React動畫庫，這些庫可以與React集成在一起，以生成交互式且吸引人的網頁。

0.建立自己的動畫庫 (0. Building Your Own Animation Library)

Building your own animations or even just composing animations out of existing libraries is something you should definitely try for yourself. It doesn’t have to be a complete ‘component library project’. Whenever you build a component you think you or your team may want to use in the future, simply publish it to Bit.dev.

一定要自己嘗試制作自己的動畫，甚至只是從現有庫中合成動畫。 它不必是完整的“組件庫項目”。 每當您構建組件時，您認為您或您的團隊將來可能希望使用，只需將其發布到Bit.dev即可 。

Once a component gets published to Bit.dev, it gets automatically documented (if you’re using prop-types or TypeScript). In addition, you can add your own example code snippets that would get rendered for you, on the component page.

組件一旦發布到Bit.dev ，它就會被自動記錄(如果您使用的是prop-types或TypeScript)。 此外，您可以在組件頁面上添加自己的示例代碼片段，這些片段將為您呈現。

It’s quite simply a good way to gradually build your own shareable collection of reusable React components.

這是逐步構建自己的可重用React組件的共享集合的一種好方法。

1.React過渡小組 (1. React Transition Group)

React Transition Group is a comprehensive animation library with 7.1k Github stars. It has four components that display transitions from one component state to another using a declarative API used for mounting and unmounting of components:

React Transition Group是一個擁有7.1k Github星星的綜合動畫庫。 它具有四個組件，這些組件使用用于安裝和卸載組件的聲明性API顯示從一個組件狀態到另一組件狀態的轉換：

1. Transition

1.過渡

2. CSSTransition

2. CSSTransition

3. SwitchTransition

3. SwitchTransition

4. TransitionGroup

4. TransitionGroup

Let’s see how transition components can be used to create the following type of transitions:

讓我們看看如何使用過渡組件創建以下類型的過渡：

? ‘entering’

?“進入”

? ‘entered’

?“進入”

? ‘exiting’

?“退出”

? ‘exited’

?“退出”

To use the react-transition-group, install it using npm or yarn:

要使用react-transition-group，請使用npm或yarn安裝它：

# npm

＃npm

# yarn

＃紗

Let’s import the ‘Transition’ component from the ‘react-transition-group’ in to the App.js file.

讓我們從“ react-transition-group”中將“ Transition”組件導入App.js文件。

Set the transition component using a timeout and allow the component to begin the “enter” stage by setting the transition to true. As the current component changes state from ‘entered’ to “entering” and back to “entered”, we will set the “.box-entered” and “.box-entering” CSS classes to create the appropriate changes.

使用超時設置過渡組件，并通過將過渡設置為true來允許該組件開始“進入”階段。 當當前組件的狀態從“已輸入”更改為“已輸入”，然后再回到“已輸入”時，我們將設置“ .box-entered”和“ .box-entering” CSS類以創建適當的更改。

Set the keyframes that set the properties like position and color during the smooth transition.

設置關鍵幀，這些關鍵幀將設置平滑過渡期間的位置和顏色等屬性。

2.React真棒揭示 (2. React Awesome Reveal)

This is a React component written in TypeScript, and it uses the Intersection Observer API to add reveal animations. The intersection API detects the element as it appears in the viewport. Internally, the animations are accelerated using Animation.css that uses the benefit of hardware acceleration.

這是一個用TypeScript編寫的React組件，它使用Intersection Observer API添加顯示動畫。 相交API檢測到視口中出現的元素。 在內部，使用Animation.css加速了動畫，該動畫利用了硬件加速的優勢。

Here is an example of the Slide component using React Awesome Reveal.

這是使用React Awesome Reveal的Slide組件的示例。

Add the dependency of React Awesome Reveal as follows:

添加React Awesome Reveal的依賴項，如下所示：

using npm

使用npm

using yarn

用紗

Let’s import the Slide component from “react-awesome-reveal”. This animated component slides your content during the mounting of components.

讓我們從“ react-awesome-reveal”中導入Slide組件。 這個動畫組件會在組件安裝期間滑動您的內容。

Use the Slide components with the content and allow it to slide in at once.

將“幻燈片”組件與內容一起使用，并使其一次滑入。

There are various other effects like cascade, damping, direction, and duration. It also allows you to chain multiple effects together.

還有其他各種效果，例如級聯，阻尼，方向和持續時間。 它還允許您將多個效果鏈接在一起。

This is a quick example of chaining effects:

這是鏈接效果的快速示例：

3. Motion API (3. Motion API)

Motion API provides a simple animation, gesture API as a FrameX library, and maintains SVG and HTML semantics. Your highly animated prototypes are portable to a production-ready environment. It allows,

Motion API提供了一個簡單的動畫，手勢API作為FrameX庫，并維護SVG和HTML語義。 您動畫效果極強的原型可移植到可用于生產環境中。 它允許

1) Animation: Animation is automatically done by using an animate prop.

1)動畫：動畫是通過使用動畫道具自動完成的。

2) Gestures: Gestures like hover, tag, pan, and drag are supported as the React event system is extended.

2)手勢：隨著React事件系統的擴展，支持諸如懸停，標記，平移和拖動之類的手勢。

3) Variants: Sub-tress is animated using a single animate prop. It also orchestrates these animations with options like “when” and “staggerChildren”.

3)變體：使用單個動畫道具對子樹進行動畫處理。 它還使用“ when”和“ staggerChildren”等選項來編排這些動畫。

4) Server-side Rendering: Server-side rendering is possible with flashes of restyled content.

4)服務器端渲染：可以通過重新樣式化的內容的閃爍來實現服務器端渲染。

5) Motion values: This is used to create reactive chains of motion values that get updated during animations.

5)運動值：用于創建在動畫過程中更新的運動值的React鏈。

6) Scroll-based Animations: Motion makes scroll-based or parallax animations easy.

6)基于滾動的動畫：Motion使基于滾動或視差的動畫變得容易。

Motion works with React 16.8 and later versions. Install framer-motion using npm.

Motion適用于React 16.8和更高版本。 使用npm安裝framer-motion。

The official site is filled with examples. Let’s try out “AnimateSharedLayout” which allows the animation of different components sharing layout ID. Though it is in beta, you will be able to install it with the following command:

官方站點上有很多示例。 讓我們嘗試一下“ AnimateSharedLayout”，它允許不同組件的動畫共享布局ID。 盡管它處于測試版，但是您可以使用以下命令進行安裝：

Lets first create the data that needs to be displayed.

首先創建需要顯示的數據。

Let’s animate the above data using motion and AnimatedSharedLayout from “framer-motion”.

讓我們使用來自“ framer-motion”的運動和AnimatedSharedLayout為上述數據設置動畫。

Along with the motion components, CSS plays an important role in animation. Check out the CSS file for this example.

CSS與運動組件一起在動畫中起著重要作用。 請查看此示例CSS文件。

4.ReactTweenful： (4. React Tweenful:)

React Tweenful creates real-world animations for your pages. It uses SVG to perform animations for various shapes, colors, and sizes. React Tweenful includes features like:

React Tweenful為您的頁面創建真實世界的動畫。 它使用SVG來執行各種形狀，顏色和大小的動畫。 React Tweenful包括以下功能：

1. Looping: Works for a specific number or an infinite loop.

1.循環：適用于特定數字或無限循環。

2. Easing techniques: This is a classic animation that starts with a point to move naturally along a curve. It gives an option to predefined easing. Custom easing can also be performed with Bezier.

2.緩動技術：這是一種經典動畫，其起始點是沿曲線自然移動。 它提供了預定義寬松的選項。 自定義緩動也可以使用Bezier執行。

3. Delayed animations: It is possible to set a delay to start and end the animation. You can also add a delay to current animations and events. In addition, it allows a negative delay that can mimic CSS animations.

3.延遲的動畫：可以設置開始和結束動畫的延遲。 您還可以向當前動畫和事件添加延遲。 此外，它允許產生可以模擬CSS動畫的負延遲。

4. Events support: Provides event support to manage animations.

4.事件支持：提供事件支持以管理動畫。

5. Animations based on percent: Allows percentages for CSS animations.

5.基于百分比的動畫：允許CSS動畫的百分比。

6. A component called “Tweenful” is provided to animate the DOM. Using this component the DOM nodes are manipulated easily.

6.提供了一個名為“ Tweenful”的組件來為DOM制作動畫。 使用此組件，可以輕松操縱DOM節點。

8. Animating SVG: To animation SVG nodes a specific SVG component is provided.

8.動畫SVG：為動畫SVG節點提供了特定的SVG組件。

9. Observer component: Supports Mounting and unmounting animations while the component is loading and unloading, with the Observer component.

9. Observer組件：支持使用Observer組件在組件加載和卸載時安裝和卸載動畫。

10. Handling child transitions during animations like removal of list or change of page requires observers. The ObserverGroup component handles child transitions during animations.

10.處理動畫過程中的子過渡(例如刪除列表或更改頁面)需要觀察者。 ObserverGroup組件處理動畫期間的子過渡。

Now let’s look at an example of React Tweenful. Start by installing it using npm:

現在讓我們看一下React Tweenful的示例。 首先使用npm安裝它：

Then let’s download the zip folder for the repo and then navigate to src folder to get the required library file (In this example, we’re using Observer.js)

然后讓我們下載的zip文件夾的回購 ，然后導航到src文件夾，以獲得所需要的庫文件(在這個例子中，我們使用Observer.js)

Let’s import it as follows:

讓我們如下導入它：

Add the following props object to configure the animation.

添加以下props對象以配置動畫。

Now let’s write our class.

現在讓我們編寫我們的課程。

This is where we add the object to be animated. The Observer and Tweentiful.div components will be placed inside the return statement of our App class:

這是我們要添加動畫對象的地方。 Observer和Tweentiful.div組件將放置在我們的App類的return語句內：

That’s it. This is the result:

而已。 結果如下：

5. React運動 (5. React Motion)

This is a popular library for React. The animations created look natural and use physics concepts to provide a realistic feel.

這是React的流行庫。 所創建的動畫看起來自然，并使用物理概念提供逼真的感覺。

The demo provides various examples with varying levels of complexity. The community has provided a large set of live examples and demos of games, animations, transitions, and drawings along with many Youtube channels and tutorials.

該演示提供了具有不同復雜程度的各種示例。 該社區提供了大量的游戲，動畫，過渡和繪圖的實時示例和演示，以及許多Youtube頻道和教程。

This library is an alternative to the react transition group. The API avoids using hard-coded values and durations to create animations. Hard-coding the values does not lead to smooth transitions when interrupted. To create realistic animations, React Motion uses the values of stiffness, damping, and precision during the animations. The effects are created using the below API.

該庫是React過渡組的替代方法。 API避免使用硬編碼的值和持續時間來創建動畫。 硬編碼值在中斷時不會導致平滑過渡。 為了創建逼真的動畫，React Motion在動畫過程中使用剛度，阻尼和精度值。 使用以下API創建效果。

1) Spring: Spring is a function and defines the animation of destination value by setting stiffness and damping to the given value. Check the demo on how the values of stiffness and damping affect spring motion.

1) Spring ：Spring是一個函數，它通過將剛度和阻尼設置為給定值來定義目標值的動畫。 查看演示中有關剛度和阻尼值如何影響彈簧運動的演示。

2) Motion: To wrap any component wrap it around the motion and set up the props like spring functions and inline styling to animate it.

2)動作：要包裹任何組件，請將其包裹在動作周圍，并設置諸如彈簧功能和內嵌樣式的道具以對其進行動畫處理。

3) Staggered Motion: This component sets the interpolated value of an item depending on the value of previous items. This motion is used for menu animation where the links stagger, but the position is dependent on the previous menu links.

3)交錯運動：此組件根據先前項目的值設置項目的插值。 此動作用于菜單動畫，其中鏈接交錯，但位置取決于先前的菜單鏈接。

4) Transition Motion: Used during mounting and unmounting of items. For example, if you have three items and you would like to animate the third item while the component renders, you can use the TransitonMotion component by defining the key, data and style required for the animation.

4)過渡運動：在物品的裝卸過程中使用。 例如，如果您有三個項目，并且想在組件渲染時為第三個項目設置動畫，則可以通過定義動畫所需的關鍵點，數據和樣式來使用TransitonMotion組件。

Let’s look at an example using React Motion. We start by installing it via npm:

讓我們來看一個使用React Motion的示例。 我們首先通過npm安裝它：

We’ll be creating a ball that rolls away when we click on it. Import React Motion to your App.js file.

我們將創建一個單擊時會滾開的球。 將React Motion導入您的App.js文件。

Now let’s write the css for our animation.

現在，讓我們為動畫編寫CSS。

Add the following functions to handle what happens when we click on the ball:

添加以下函數來處理我們單擊球時發生的情況：

This is the Motion component. It defines the object to be animated, in this case, it is the image of the ball.

這是運動組件。 它定義了要動畫的對象，在這種情況下，它是球的圖像。

This is how the result will look:

結果如下所示：

結論 (Conclusion)

We looked at five libraries for creating animations and transitions for your websites. Each of these offers a unique way of creating animations. Now all libraries work well with all scenarios and requirements. So it is important that you experiment with at least a few of them before selecting one.

我們研究了五個用于為您的網站創建動畫和過渡的庫。 每一種都提供了一種獨特的動畫制作方式。 現在，所有庫都能很好地滿足所有方案和要求。 因此，在選擇一個之前，至少要對其中一些進行試驗，這一點很重要。

學到更多 (Learn More)