spring react_使用React Spring在React中介绍动画

spring react

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

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

先决条件 (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 this article.

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

安装与设定 (Installation and Setup)

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

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

$ 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和