简介
动画为您的应用程序增添了活力，并改善了整体用户体验。Reaction Spring是一个动画包，它在其核心动画中使用了类似弹簧的物理原理，使其易于配置。弹簧是累积的，这意味着它们会记住传递给它们的所有值。
使用Spring，您可以：
- 将值从测量单位转换为实际数据。
- 操作HTML属性。
- 操纵SVG路径。
- 调整CSS。
在本教程中，您将使用react-spring的Spring组件在Reaction应用程序中创建滑动和渐变动画。
第一步-配置项目
您将使用react-react-app命令设置React环境。这也将生成一些样板代码，让您可以开始使用。要安装它，请运行以下命令：
1npm install -g create-react-app
现在你可以使用它来创建你的应用程序：
1create-react-app react-spring-demo
将创建一个名为reaction-Spring-demo的文件夹。移至该目录并安装act-spring程序包：
1yarn add react-spring
您会注意到，我们使用YAR)作为此项目的包管理器，因为它是Create-Reaction-app的默认包管理器。确保使用以下命令安装它：
1npm install -g yarn
现在已经设置好了，您可以创建您的第一个动画页面了。
第二步-设置样式动画
弹簧可用于设置样式的动画。在本例中，您将使用它来动画转换到新加载的页面。为此，您需要将App.js的jsx上下文包装在一个Spring组件中。
Spring组件将带有两个道具，From和to，它们表示动画要插补的值。
在我们的例子中，我们希望创建页面从上方下落并淡入的效果。Create-Reaction-app生成的模板有完美的背景来展示这种效果，所以您现在不需要更改它。
为了达到投放效果，页面元素的初始上边距将被设置为负值，并在动画中变为0‘。要创建淡入淡出效果，您需要将不透明度的初始值设置为0‘，并在动画结束时将该值设置为`1’。
App.js文件如下所示：
1[label App.js]
2//
3import React, { Component } from 'react';
4import logo from './logo.svg';
5import './App.css';
6import { Spring } from 'react-spring';
7
8class App extends Component {
9 render() {
10 return (
11
12 <Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}>
13 { props => (
14 <div className="App" style={ props }>
15 <div >
16 <header className="App-header" >
17 <img src={logo} className="App-logo" alt="logo" />
18 <p>
19 Edit <code>src/App.js</code> and save to reload.
20 </p>
21 <a
22 className="App-link"
23 href="https://reactjs.org"
24 target="_blank"
25 rel="noopener noreferrer"
26 >
27 Learn React
28 </a>
29 </header>
30 </div>
31 </div>
32 )
33 }
34 </Spring>
35 );
36 }
37}
38
39export default App;
通过运行此命令启动您的应用程序。
1yarn start
您的浏览器将打开，您将看到页面加载了所需的拖放和淡出动画。
您可以使用Spring通过调整各种样式来创建更多的动画。建议坚持使用动画不透明和翻译来保持应用程序的轻便。
第三步-动画化innerText
您还可以使用Spring为屏幕上显示的内容的值设置动画。为了显示这一点，您将使用Spring创建一个从0开始到10结束的计数器。From将保存初始值，to将保存要显示的最终值。
在src目录下，创建一个名为Components的文件夹。在该目录中，创建一个名为Counter.jsx的文件。在Countrt.jsx中添加以下代码：
1[label src/components/Countrt.jsx]
2import React from 'react';
3import { Spring } from'react-spring';
4
5const counter = () => (
6 <Spring
7 from={{ number: 0 }}
8 to={{ number: 10 }}
9 {props => <div>{props.number.toFixed()}</div>}
10 </Spring>
11)
12
13export default counter;
将计数器导入到App.js中，添加到Header元素下，呈现在APP中：
1[label App.js]
2...
3import Counter from './components/Counter';
4
5class App extends Component {
6 render() {
7 return (
8
9 <Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}>
10 { props => (
11 <div className="App" style={ props }>
12 <div >
13 <header className="App-header" >
14 <img src={logo} className="App-logo" alt="logo" />
15 <p>
16 Edit <code>src/App.js</code> and save to reload.
17 </p>
18 <a
19 className="App-link"
20 href="https://reactjs.org"
21 target="_blank"
22 rel="noopener noreferrer"
23 >
24 Learn React
25 </a>
26 <Counter />
27 </header>
28 </div>
29 </div>
30 )
31 }
32 </Spring>
33 );
34 }
35}
36
37export default App;
当你打开浏览器时，你会注意到在Learn React文本下的计数器：
下带有10的默认反应页面
动画发生得如此之快，以至于当初始页面动画进入可见性时，您会错过它。要解决此问题，可以通过添加以毫秒为单位的delay道具来延迟动画。这是动画在开始之前等待的时间量。
在添加一秒延迟后，计数器函数现在看起来像这样：
1[label src/components/Countrt.jsx]
2const counter = () => (
3 <Spring
4 from={{ number: 0 }}
5 to={{ number: 10 }}
6 delay= '1000'>
7 {props => <div>{props.number.toFixed()}</div>}
8 </Spring>
9)
现在，计数器在页面动画完成后启动。您也可以通过config道具添加该延迟，我们将在讨论Spring配置时介绍。
第四步-调整弹簧config
如前所述，弹簧是基于物理的。这意味着您不必手动处理持续时间和曲线。这是有帮助的，因为它带走了一些沉重的数学，你可能必须涵盖。但是，您仍然可以通过config属性调整Spring的张力、摩擦力、延迟、质量和其他行为来调整Spring的行为。
‘reaction-spring包括一些预设，你可以用它们来调整你的弹簧。要使用它们，您必须从react-spring包中导入config，并将它们提供给Spring的config属性。为了防止混淆config`是哪一个，请看下面的示例：
1import React from 'react';
2import { Spring, config } from'react-spring';
3
4const counter = () => (
5 <Spring
6 from={{ number: 0 }}
7 to={{ number: 10 }}
8 delay= '1000'
9 config = { config.molasses }>
10 {props => <div>{props.number.toFixed()}</div>}
11 </Spring>
12)
13
14export default counter;
在上面的示例中，您使用了molasses预设。这是由Reaction-Spring提供的高张力和摩擦力预设。这些预设通常定义了Out Spring的张力‘和摩擦’属性。这些预设包括molasses、default、slow、star和wobbly。
虽然预设仅定义张力和摩擦力，但您可以手动配置弹簧动画的其他属性。几个例子包括延迟、质量、速度和持续时间。有关您可以配置的属性的完整列表，以及可以作为道具传递的其他选项，请查看This page.
第五步-使用钩子探索使用方法
Reaction团队最近推出了Reaction Hooks.Reaction Hooks允许您创建可永久存储数据和原因影响的功能组件，从而为功能组件添加状态。在撰写本文时，钩子只在React 16.7 Alpha中可用。要使用钩子，您需要升级到react和action-dom的16.7 Alpha版本。
为此，请运行以下命令：
1yarn remove react-dom && yarn add [email protected]
1yarn remove react && yarn add [email protected]
我们可以使用react-spring开箱即用的钩子，它导出一个名为useSpring的钩子。这个钩子允许你定义和更新数据，并且通常由你作为props传递的相同值组成。useSpring会将其转换为动画数据。为了展示这一点，让我们看看如何在我们之前的动画完成后渲染更多的文本。
创建一个名为Hooks.jsx的新组件文件，并添加以下代码：
1[label Hooks.jsx]
2import React from 'react';
3import { useSpring, animated } from 'react-spring';
4
5const HookedComponent = () => {
6 const [props] = useSpring({
7 opacity: 1,
8 color: 'white',
9 from: { opacity: 0 },
10 delay: '2000'
11 })
12 return <animated.div style={props}>This text Faded in Using hooks</animated.div>
13}
14
15export default HookedComponent;
此代码将弹簧设置作为参数对象传递给useSpring。然后，它会将这些值传递给创建动画弹簧的animated元素。延迟被设置为2000毫秒，以确保在计数器完成后，来自挂钩组件的文本淡入。
现在我们将其导入到App.js中，并在我们的应用程序中使用HookedComponent。在清除了Create-Reaction-app中的一些初始样板代码之后。启动您的最终应用程序以查看更改。
的文本的最终项目
结论
您现在已经使用react-spring设置了一个试用应用程序。Spring提供了有效的方法来动画化React应用程序，同时从开发人员那里带走了大量的工作量。
您可以使用reaction-spring‘S其他组件在Spring的基础上进行构建。总的来说，reaction-spring包含多种选项，可以根据您的动画需求进行选择。