spring react

In this article we’ll be exploring one of the best animation frameworks for React: . You’ll learn some of the basics behind changing you component styling into smooth, physics-based transitions.

在本文中，我们将探索React的最佳动画框架之一： 。 您将学习将组件样式更改为平滑的，基于物理的过渡的一些基础知识。

先决条件 (Prerequisites)

React Spring has both a hooks-based and a component-based API, we’ll be exclusively looking at using hooks with basic state for all our animations. So if you need some brushing up on React Hooks, I recommend .

React Spring同时具有基于钩子和基于组件的API，我们将专门针对所有动画使用具有基本状态的钩子。 因此，如果您需要对React Hooks进行一些梳理，我建议您阅读 。

安装与设定 (Installation and Setup)

Of course, we’re going to need react-spring, and we can just use to get started.

当然，我们将需要react-spring，我们可以使用来开始。

$ npx create-react-app react-spring-example$ cd react-spring-example$ npm i react-spring

从和到 (From and To)

In our App.js file we’re going to need useSpring and animated from react-spring.

在我们的App.js文件中，我们将需要useSpring和来自react-spring的 animated 。

useSpring is a custom hook that we can set our style to, it takes an object with the from and to values as the start and end states while react-spring handles the transition between them. from and to can take objects of almost every css property: color, size, transform, and even our scrollbar. To apply our spring animation, we just need to add animated onto our HTML tags and pass our animation to our style. By default this is run as soon as the component is mounted.

useSpring是一个自定义钩子，我们可以将其设置为样式，它使用一个对象，该对象的from和to值为开始和结束状态，而react-spring处理它们之间的过渡。 from和to可以获取几乎所有CSS属性的对象：颜色，大小，变换，甚至滚动条。 要应用我们的Spring动画，我们只需要在HTML标签上添加animated然后将animated传递给我们的样式即可。 默认情况下，此操作在组件安装后立即运行。

Going from one value to another is maybe a little boring, but react-spring lets us use arrays to render animations with multiple stages. Just remember to always include the starting state with any property you want to add.

从一个值到另一个值可能有点无聊，但是react-spring让我们使用数组来渲染具有多个阶段的动画。 只记得始终将开始状态包括在要添加的任何属性中。

import React, { useState } from 'react';import { useSpring, animated } from 'react-spring';const App = () => {  const animation = useSpring({    from: { opacity: 0 },    to: { opacity: 1 }  });  const colorAnimation = useSpring({    from: { color: 'blue' },    to: { color: `rgb(255,0,0)` }  });  const multiAnimation = useSpring({    from: { opacity: 0, color: 'red' },    to: [        { opacity: 1, color: '#ffaaee' },        { opacity: 1, color: 'red' },        { opacity: .5, color: '#008000' },        { opacity: .8, color: 'black' }    ]  });  return (    
    
      
     
      Hello World
           
     
      Hello World
           
     
      Hello World
         
    
  )};export default App;

州 (State)

Adding some local state will allow us to add some actual interactions to our animations, instead of transitioning on mount. Instead of from and to we can use a ternary operator for our single step animations.

添加一些局部状态将使我们能够向动画中添加一些实际的交互，而不必在安装时进行过渡。 对于单步动画to我们可以使用三元运算符来代替from 。

import React, { useState } from 'react';const App = () => {  const [on, toggle] = useState(false);  const animation = useSpring({    color: on ? 'blue' : 'red'  });  return (    
    
      
     
      {!on ? "I'm red" : "Now I'm blue" }
           
      toggle(!on)}>Change    
    
  )};

插 (Interpolate)

Besides only adding static style changes to our elements and components we can create more interesting and reusable animations using the interpolate method. We can add variables to our spring, since it is also an object, and use interpolate to extract them for our styles.

除了仅对元素和组件添加静态样式更改之外，我们还可以使用interpolate方法创建更有趣和可重用的动画。 因为它也是一个对象，所以我们可以向其弹簧中添加变量，并使用interpolate将其提取为样式。

We just need to extract our value from our spring and use interpolate to destructure it some more, throw them into some and we’re good to go. This will allow us the freedom to set more dynamic values, like a color value that is based on the x position.

我们只需要从spring中提取我们的值，并使用interpolate对其进行更多分解，将它们放入一些 ，我们就很好了。 这将使我们能够自由设置更多的动态值，例如基于x位置的颜色值。

const App = () => {  const [on, toggle] = useState(false);  const { xy } = useSpring({    from: { xy: [0, 0], c: 'green' },    xy: on ? [800, 200] : [0, 0],    c: on ? 'red' : 'green'  });  return (    
    
      
     
       `translate(${x}px, ${y}px)`),             color: c.interpolate(c => c)}}>        {!on ? "I'm here" : "Now I'm over here"}
           
      toggle(!on)}>Change    
    
  )};

模仿关键帧 (Mimicking Keyframes)

One of the more useful aspects of interpolate is that we can emulate . Instead of passing a value into our spring, we’ll just set it to 1 or 0. Before we can interpolate it like before, we need to pass in an object with a range and an output. Range can be any value between 0 and 1 and works like setting breakpoints with CSS keyframes, the corresponding output is the value that will be prerendered.

interpolate的更有用的方面之一是我们可以模拟 。 与其将值传递到spring中，不如将其设置为1或0。像以前一样插值之前，我们需要传递一个带有range和output的对象。 范围可以是0到1之间的任何值，并且可以像使用CSS关键帧设置断点那样工作，相应的输出是将被预渲染的值。

A second interpolate will then reset our style at every change in output.

然后，第二次interpolate将在每次输出更改时重置我们的样式。

const App = () => {  const [on, toggle] = useState(false)  const { x, c } = useSpring({    from: { xy: [0, 0], c: 0 },    x: on ? 1 : 0,    c: on ? 1 : 0  })  return (     
    
      
     
       `translateX(${x}px)`),          color: c.interpolate({            range: [0, .5, 1],            output: ['red', 'blue', 'green']          }).interpolate(c => c)        }}>        {!on ? "I'm here" : "Now don't know where I'm going"}
           
      toggle(!on)}>Change    
    
  )}

设定档 (Config)

On its own, the previous example is very abrupt and jarring. This is because of react-spring’s default configuration. The animations are mostly based off of a few properties that we are allowed to easily manipulate in our spring. The have a wonderful interactive example that really helps to get an intuitive feel for the different properties.

就其本身而言，前面的示例非常突然且令人震惊。 这是由于react-spring的默认配置。 动画主要基于一些属性，我们可以在春天对其进行轻松操作。 该有一个很棒的交互式示例，确实有助于获得不同属性的直观感觉。

• mass: Affects the speed and how far it overshoots the transition.

  mass ：影响速度及其对过渡的超调程度。

• tension: Affects the overall velocity.

  tension ：影响整体速度。

• friction: Controls the resistance and how quickly it decelerates.

  friction ：控制阻力及其减速的速度。

• clamp: Whether it should ever overshoot the transitions.

  clamp ：是否过冲过渡。

const animation = useSpring({    {/* ... */}    config: {      mass: 5,      tension: 50,      friction: 25,      clamp: true    }  });

To help us out the team at react-spring even included some configuration presets we can import that will be very useful.

为了帮助我们在React Spring团队工作，甚至包括一些配置预设，我们可以导入这些配置预设将非常有用。

• config.default { mass: 1, tension: 170, friction: 26 }

  config.default {质量：1，张力：170，摩擦：26}

• config.gentle { mass: 1, tension: 120, friction: 14 }

  config.gentle {质量：1，张力：120，摩擦：14}

• config.wobbly { mass: 1, tension: 180, friction: 12 }

  config.wobbly {质量：1，张力：180，摩擦：12}

• config.stiff { mass: 1, tension: 210, friction: 20 }

  config.stiff {质量：1，张力：210，摩擦：20}

• config.slow { mass: 1, tension: 280, friction: 60 }

  config.slow {质量：1，张力：280，摩擦：60}

• config.molasses { mass: 1, tension: 280, friction: 120 }

  config.molasses {质量：1，张力：280，摩擦：120}

import { useSpring, animated, config } from 'react-spring';const animation = useSpring({    {/* ... */}    config: config.wobbly  });// Or you can just destructure it if you want to change other options const animation = useSpring({    {/* ... */}    config: {        ...config.molasses,         clamp: true    }  });

结论 (Conclusion)

While the examples here may not have been the most flashy, I hope that they are enough to help you understand the basics behind React animations using react-spring. ✨

尽管这里的示例可能并不是最华丽的示例，但我希望它们足以帮助您了解使用react-spring的React动画的基础知识。 ✨

翻译自:

spring react