如何使用ReactSpring创建动画React应用程序

介绍

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

使用 Spring，您可以：

操作从测量单位到实际数据的值。
操作 HTML 属性。
操作 SVG 路径。
调整 CSS。

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

第 1 步 — 配置项目

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

npm install -g create-react-app

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

create-react-app react-spring-demo

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

yarn add react-spring

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

npm install -g yarn

现在一切都设置好了，您可以创建第一个动画页面了。

第 2 步 - 动画样式

Spring 可用于动画样式。在本例中，您将使用它来动画过渡到新加载的页面。为此，您将 App.js 的 jsx 上下文包装在 Spring 组件中。

Spring 组件将采用两个 props，from 和 to，它们表示要由动画插值的值。

在我们的例子中，我们想要创建一个页面从上方下拉并淡入的效果。 create-react-app 生成的样板有完美的背景来展示这种效果，所以你现在不需要改变它。

为了实现下降效果，页面元素的初始上边距将设置为负值，并在动画期间被带到 0。要创建淡入效果，您需要将不透明度的初始值设置为 0，并在动画结束时将该值设置为 1。

这就是 App.js 文件的样子：

应用程序.js

//
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Spring  } from 'react-spring';

class App extends Component {
  render() {
    return (

        <Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}>
          { props => (
            <div  className="App" style={ props }>
              <div >
                <header className="App-header" >
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>
                      Edit <code>src/App.js</code> and save to reload.
                    </p>
                      <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                      Learn React
                    </a>
                  </header>
                </div>
              </div>
            )
          }
        </Spring>
    );
  }
}

export default App;

通过运行此命令启动您的应用程序。

yarn start

您的浏览器将打开，您将看到页面加载并带有所需的下降和淡入动画。

您可以使用 Spring 通过调整各种样式来创建更多动画。建议坚持动画不透明度和翻译以保持您的应用程序轻便。

第 3 步 - 动画 `innerText`

您还可以使用 Spring 为屏幕上显示的内容值设置动画。为了展示这一点，您将使用 Spring 创建一个从 0 开始到 10 结束的计数器。 from 将保存初始值，to 将保存要显示的最终值。

在 src 目录下，创建一个名为 components 的文件夹。在该目录中，创建一个名为 Counter.jsx 的文件。将以下代码添加到 Countrt.jsx：

src/components/Countrt.jsx

import React from 'react';
import { Spring } from'react-spring';

const counter = () => (
    <Spring
        from={{ number: 0 }}
        to={{ number: 10 }}
       {props => <div>{props.number.toFixed()}</div>}
    </Spring>
)

export default counter;

将计数器导入 App.js 并将其添加到 header 元素下以在应用程序中呈现它：

应用程序.js

...
import Counter from './components/Counter';

class App extends Component {
  render() {
    return (

        <Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}>
          { props => (
            <div  className="App" style={ props }>
              <div >
                <header className="App-header" >
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>
                      Edit <code>src/App.js</code> and save to reload.
                    </p>
                      <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                      Learn React
                    </a>
                    <Counter />
                  </header>
                </div>
              </div>
            )
          }
        </Spring>
    );
  }
}

export default App;

当您打开浏览器时，您会注意到 Learn React 文本下方的计数器：

动画发生得如此之快，以至于您在初始页面动画可见时错过了它。要解决此问题，您可以通过添加 delay 属性作为毫秒值来延迟动画。这是动画在开始之前将等待的时间量。

添加一秒延迟后，计数器函数现在将如下所示：

src/components/Countrt.jsx

const counter = () => (
    <Spring
        from={{ number: 0 }}
        to={{ number: 10 }}
        delay= '1000'>
        {props => <div>{props.number.toFixed()}</div>}
    </Spring>
)

计数器现在在页面动画完成后开始。您还可以通过 config 属性添加此延迟，这将在讨论 Spring 配置时介绍。

第 4 步 — 调整弹簧 `config`

如前所述，弹簧是基于物理的。这意味着您不必手动处理持续时间和曲线。这很有帮助，因为它消除了您可能必须涵盖的一些繁重的数学运算。但是，您仍然可以通过 config 属性调整弹簧的张力、摩擦、延迟、质量和其他行为来调整弹簧的行为。

react-spring 包括可用于调整弹簧的预设。要使用它们，您必须从 react-spring 包中导入 config 并将它们提供给 Spring 的 config 属性。为防止混淆 config 是哪个，请查看以下示例：

import React from 'react';
import { Spring, config } from'react-spring';

const counter = () => (
    <Spring
        from={{ number: 0 }}
        to={{ number: 10 }}
        delay= '1000'
        config = { config.molasses }>
        {props => <div>{props.number.toFixed()}</div>}
    </Spring>
)

export default counter;

在上面的示例中，您使用了 molasses 预设。这是 react-spring 提供的高张力和摩擦预设。预设通常定义 out Spring 的 tension 和 friction 属性。这些预设包括 molasses、default、slow、stiff 和 wobbly。

虽然预设只定义了张力和摩擦力，但您可以手动配置弹簧动画的其他属性。一些例子包括延迟、质量、速度和持续时间。有关您可以配置的属性的完整列表，以及可以作为道具传递的其他选项，请查看此页面。

第 5 步 — 探索 Hooks 的用法

React 团队最近推出了 React Hooks。 React Hooks 允许您创建可以永久存储数据并引起影响的功能组件，从而为功能组件添加状态。在撰写本文时，挂钩仅在 React 16.7 alpha 中可用。要使用挂钩，您需要升级到 react 和 react-dom 的 16.7 alpha 版本。

为此，请运行以下命令：

yarn remove react-dom && yarn add react-dom@16.7.0-alpha.0

yarn remove react && yarn add react@16.7.0-alpha.0

我们可以通过 react-spring 使用开箱即用的钩子，它会导出一个名为 useSpring 的钩子。这个钩子允许您定义和更新数据，并且通常包含您将作为道具传递的相同值。 useSpring 会把它变成动画数据。为了展示这一点，让我们看看我们如何在之前的动画完成后渲染更多的文本。

创建一个名为 Hooks.jsx 的新组件文件并添加以下代码：

钩子.jsx

import React from 'react';
import { useSpring, animated } from 'react-spring';

const HookedComponent = () => {
    const [props] = useSpring({
        opacity: 1,
        color: 'white',
        from: { opacity: 0 },
        delay: '2000'
    })
    return <animated.div style={props}>This text Faded in Using hooks</animated.div>
}

export default HookedComponent;

此代码将弹簧设置作为参数对象传递给 useSpring。然后它将这些值传递给创建动画弹簧的 animated 元素。延迟设置为 2000 毫秒，以确保来自挂钩组件的文本在计数器完成后淡入。

现在让我们将它导入 App.js 并在我们的应用程序中使用 HookedComponent。在清理了 create-react-app 中的一些初始样板代码之后。启动您的最终应用程序以查看更改。

结论

您现在已经使用 react-spring 设置了试用应用程序。 Spring 提供了为 React 应用程序制作动画的有效方法，同时减轻了开发人员的大量工作量。

您可以使用 react-spring 的其他组件在 Spring 上进行构建。总体而言，react-spring 包含多种选项，具体取决于您的动画需求。