spring react_如何使用React Spring创建动画的React应用

spring react

介绍 (Introduction)

Animations add life to your applications and improve the overall user experience. React Spring is an animation package that uses spring-like physics in its core animations to make it easily configurable. Springs are cumulative, meaning they’ll remember all values passed to them.

动画可以为您的应用程序增添生气，并改善整体用户体验。 React Spring是一个动画程序包，在其核心动画中使用了类似弹簧的物理原理，使其易于配置。 弹簧是累积的，这意味着它们会记住传递给它们的所有值。

With Spring you are able to:

使用Spring，您可以：

• Manipulate values from measurement units to actual data.
  将值从测量单位转换为实际数据。
• Manipulate HTML attributes.
  处理HTML属性。
• Manipulate SVG paths.
  操作SVG路径。
• Adjust CSS.
  调整CSS。

In this tutorial, you will create a sliding and fading animation in a React app using the Spring component of react-spring.

在本教程中，您将使用react-spring的Spring组件在React应用程序中创建滑动和淡入淡出的动画。

第1步-配置项目 (Step 1 — Configuring the Project)

You will be setting up the React environment with create-react-app command. This will also generate some boilerplate code that will allow you to get started. To install it, run this command:

您将使用create-react-app命令设置React环境。 这还将生成一些样板代码，使您可以入门。 要安装它，请运行以下命令：

• npm install -g create-react-app
  npm install -g create-react-app

Now you can use it to create your app:

现在，您可以使用它来创建您的应用程序：

• create-react-app react-spring-demo

  创建React应用程序React弹簧演示

A folder named react-spring-demo will be created. Move into that directory and install the react-spring package:

将创建一个名为react-spring-demo文件夹。 进入该目录并安装react-spring软件包：

• yarn add react-spring
  纱线添加React弹簧

You will notice we’re using yarn as the package manager for this project, as it is the default package manager for create-react-app. Ensure it is installed with the following command:

您会注意到我们正在使用yarn作为该项目的程序包管理器，因为它是create-react-app的默认程序包管理器。 确保使用以下命令安装它：

• npm install -g yarn
  npm install -g纱

Now that things are set up, you are ready to create you first animated page.

设置完成后，就可以创建第一个动画页面了。

第2步-动画样式 (Step 2 — Animating Styles)

Spring can be used to animate styles. In this example you will use it to animate the transition to a newly loaded page. To do this you will wrap the jsx context of App.js in a Spring component.

春天可以用来制作样式的动画。 在此示例中，您将使用它来制作过渡到新加载页面的动画。 为此，您需要将jsx上下文App.js在Spring组件中。

The Spring component will take two props, from and to, which represent the values to be interpolated by the animation.

Spring组件将采用两个道具from和t