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)