spring react_使用React Spring将React动画提升到一个新的水平

spring react

Prerequisites — React basics

先决条件— React基础知识

Animations are the important parts of UX that give an additional feel to the users and add some awesomeness to the application. But implementing animations is not that easy especially when you have to keep all the users and devices in mind. So, we have to think out for a simplified and optimized way to create and manage the animations.

动画是UX的重要组成部分，它们赋予用户更多的感觉并为应用程序添加了一些很棒的功能。 但是实现动画并不是那么容易，尤其是当您必须牢记所有用户和设备时。 因此，我们必须考虑一种简化和优化的方式来创建和管理动画。

Someone said — “Animations give life to the UI components”

有人说-“动画赋予了UI组件以生命”

React is a well-established front-end library now and almost everything is possible with it. There are multiple options of doing anything in React and so is the same with animations. We can create animations in React using CSS, JS, or by using an external JavaScript library. But animations can be painful sometimes, so here’s a library named react-spring which is highly optimized and simplified for animating React components.

现在，React是一个完善的前端库，几乎所有功能都可以使用它。 在React中可以做多种事情，动画也一样。 我们可以使用CSS，JS或使用外部JavaScript库在React中创建动画。 但是动画有时可能会很痛苦，因此这里有一个名为react-spring的库，该库经过高度优化和简化，可以为React组件制作动画。

React-spring is a modern React library based on spring-physics which is highly flexible and it covers almost all of the UI animation needs. It inherits animated’s powerful interpolations and performance, as well as react-motion’s ease of use.

React-spring是一个基于spring-physics的现代React库，它具有很高的灵活性，它涵盖了几乎所有UI动画需求。 它继承了动画强大的内插和性能，以及react-motion的易用性。

React-Spring的基础 (Basics of React-Spring)

As react-spring is a modern animation library, it supports both hooks based API and the traditional class-based API as well. The hooks based API is based on 5 kinds of hooks while the class-based API is based on the react-spring components. As the React community is now focussing on functional components for simplicity so we will proceed with the hooks API. These concepts can be interpreted with the class-based API as well because the basics remain the same.

由于react-spring是现代动画库，因此它既支持基于挂钩的API，也支持传统的基于类的API。 基于钩子的API基于5种钩子，而基于类的API基于React弹簧组件。 由于React社区现在为了简化而集中于功能组件，因此我们将继续使用hooks API。 这些概念也可以用基于类的API解释，因为基本原理保持不变。

Spring is the basic component of the library and we will use that oftentimes. It acts as a building block of the animations in react-spring. spring means a factor that helps a component to move from one point/place to another.

Spring是库的基本组件，我们经常会使用它。 它是React弹簧中动画的构造块。 弹簧是帮助组件从一个点/位置移动到另一个点/位置的因素。

There are 5 major hooks in react-spring:

react-spring有5个主要的钩子：

1. useSpring — a single spring that moves data from a → b
   useSpring —从a→b移动数据的单个弹簧
2. useSprings — multiple springs, for lists, where each spring moves data from a → b
   useSprings —多个弹簧，用于列表，每个弹簧从a→b移动数据
3. useTransition — where we need to mount(add)/unmount(remove) elements transitions
   useTransition —我们需要挂载(添加)/卸载(移除)元素的转换
4. useTrail — multiple springs where one spring trails/follows behind the other.
   useTrail —多个弹簧，一个弹簧在另一个弹簧之后/跟随。
5. useChain — to queue or chain multiple animations together.
   useChain —将多个动画排队或链接在一起。

基本演示 (A Basic Demo)

The basic demo code 基本演示代码

Here, we are using the useSpring hook for defining two springs. It is clearly evident that we are taking an object named “from” where the initial value is assigned and a “number” property which signifies the final value. Similarly in the second spring, we are using a “from” object to define the initial value, the opacity property for the final value, and delay property for the delay in animation. Also, we’re using a component defined in react-spring called animated in order to animate our wrapped components.

在这里，我们使用useSpring钩子来定义两个弹簧。 显然，我们正在使用一个名为“ from”的对象，在其中分配了初始值，并使用了一个“ number”属性来表示最终值。 同样，在第二个Spring，我们使用“ from”对象定义初始值，为最终值定义opacity属性，为动画延迟定义delay属性。 另外，我们正在使用在react-spring中定义的组件，称为animation，以便为包装的组件设置动画。

In this way, the springs also handle other things like CSS properties, colors, absolute lengths, relative lengths, angles, scrolls, HTML attributes, string patterns, and a lot more.

通过这种方式，弹簧还可以处理其他事情，例如CSS属性，颜色，绝对长度，相对长度，角度，滚动，HTML属性，字符串模式等等。

Now that we know the basics of spring, let’s jump on to some advanced stuff.

现在我们已经了解了Spring的基础知识，让我们继续学习一些高级知识。

高级演示 (An Advanced Demo)

Code for useSpring advanced demo. 使用代码Spring高级演示。

In the above code, we are trying to animate a card in 3D so for that, we are taking an array ‘xys’ for the dimensions and a config object for setting some configurations specific to the object we want to animate. This config property will define how the object will move based on some parameters like mass, tension, friction, etc. Now, in the card, we are using onMouseMove event and onMouseLeave event and in these events, we are calculating the x & y positions of the object. Based on these calculations, we are transforming the object accordingly using the interpolate method of react-spring.

在上面的代码中，我们正在尝试以3D方式对卡进行动画处理，为此，我们将数组“ xys”用于尺寸，并将config对象用于设置特定于我们要动画化的对象的配置。 此配置属性将根据质量，张力，摩擦力等一些参数定义对象的移动方式。现在，在卡片中，我们使用onMouseMove事件和onMouseLeave事件，并在这些事件中，计算x和y位置对象。 基于这些计算，我们正在使用React弹簧的插值方法对对象进行相应的转换。

Interpolation — Interpolation as the name suggests is the process that takes multiple animation strings and merges them to form a complex animation. In react-spring, we use the interpolate method to do so.

插值-顾名思义，插值是采用多个动画字符串并将其合并以形成复杂动画的过程。 在react-spring中，我们使用插值方法。

更进一步 (Going one step further)

Now after getting the idea of useSpring, let’s try another react-spring hook called useTransition which helps us to add or remove successive elements. In useTransition hook, we define multiple elements and those elements follow a particular set of animation rules.

现在，在有了useSpring的想法之后，让我们尝试另一个名为useTransition的react-spring钩子，它可以帮助我们添加或删除连续的元素。 在useTransition挂钩中，我们定义了多个元素，这些元素遵循一组特定的动画规则。

Code for useTransition demo. 使用代码过渡演示。

In the above code, we are defining a set of items to render (in our case it’s a set of images) and based on the defined useTransition hook definition we will animate those items. In useTransition hook, we are defining an object and 3 properties viz. from, enter and leave are defined and transformations are mentioned in those properties. The useTransition hook returns an array of object that contains the state like whether the component is entering or leaving or steady.

在上面的代码中，我们定义了一组要渲染的项目(在我们的示例中是一组图像)，并基于已定义的useTransition挂钩定义对这些项目进行动画处理。 在useTransition挂钩中，我们定义一个对象和3个属性。 从，进入和离开进行了定义，并在这些属性中提到了转换。 useTransition挂钩返回一个对象数组，其中包含状态，例如组件进入还是离开或稳定。

Now, in order to render and animate the items we will use the map function on transitions array and return the respective elements. In this way, the useTransition hook will be used to create the transition animation in react-spring.

现在，为了渲染和设置动画，我们将在transitions数组上使用map函数并返回相应的元素。 这样，useTransition钩子将用于在react-spring中创建过渡动画。

最后的话 (The Final Words)

Animations can be painful sometimes so if we have a simplified approach to create and manage the animations then it becomes easy for the developer to play with them. The react-spring library is a very good option for simplified yet very beautiful animations for React components. In this article, we have seen some basic and advanced animations using react-spring with some hooks but you can try out others as well. I hope this article will help you to integrate animations in your next website with React. I would like to thank the react-spring developers' team for the awesome demos shown on their websites, which helped me a lot.

动画有时可能会很痛苦，因此，如果我们采用简化的方法来创建和管理动画，那么开发人员就可以轻松地使用它们。 react-spring库是用于React组件的简化但非常漂亮的动画的很好的选择。 在本文中，我们已经看到了使用带有某些钩子的react-spring的一些基本动画和高级动画，但是您也可以尝试其他动画。 我希望本文将帮助您将动画与React集成到下一个网站中。 我要感谢react-spring开发人员团队在其网站上展示的精彩演示，这对我有很大帮助。

You can find the complete code of this article in the below link:

您可以在下面的链接中找到本文的完整代码：

I appreciate your patience in reading this article. Thank you for reading this article till the end.

感谢您耐心阅读本文。 感谢您阅读本文直到最后。

翻译自: https://medium.com/@sharmaritesh3312/taking-react-animations-to-the-next-level-with-react-spring-ccfae2f277f3

spring react