react spring_使用React Spring创建动画的React应用

react spring

One thing that is pivotal to creating great interactive web applications is animations. Animations add life to your applications and improve the overall user experience.

动画对于创建出色的交互式Web应用程序至关重要。 动画可以为您的应用程序增添生气，并改善整体用户体验。

In this tutorial, we'll be looking at how to create simple yet lovely animations in your React apps using an npm package called react-spring, specifically, the Spring component of the package.

在本教程中，我们将研究如何使用一个名为react-spring的npm包（特别是该包的Spring组件）在React应用中创建简单而可爱的动画。

React Spring is a great animation package that has been endorsed by some of the React core team including Dan Abramov, and is generally considered one of the best animation packages for React apps out there. It utilises spring like physics in its core animations making it easy to configure. In this tutorial we'll be focused on the Spring component which is one of react-spring's easier to use and more flexible components.

React Spring是一个很棒的动画程序包，已被包括Dan Dan Abramov在内的一些React核心团队认可，并且通常被认为是React应用程序中最好的动画程序包之一 。 它在其核心动画中利用了像物理一样的弹簧，因此易于配置。 在本教程中，我们将重点介绍Spring组件，它是react-spring易于使用和更灵活的组件之一。

With Spring we are able to:

使用Spring，我们能够：

• Manipulate values(numbers)of any sort from measurement units to actual data.

  处理从测量单位到实际数据的各种值（数字）。

• Manipulate HTML attributes

  处理HTML属性

• Manipulate SVG paths

  操纵SVG路径

• Adjust CSS

  调整CSS

And much more!

以及更多！

Springs are cumulative, meaning they'll remember all values passed to them. Let's look at how we can get started with Springs, complete with an example making use of the newly announced React Hooks.

弹簧是累积的，这意味着它们会记住传递给它们的所有值。 让我们看一下如何开始使用Springs，并结合一个示例，充分利用新发布的React Hooks。

例子 ( Examples )

我们将建立什么 ( What We'll Build