使用ReactSpring介绍React中的动画

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

先决条件

React Spring 既有基于 hooks 的 API 也有基于组件的 API，我们将专门研究使用具有基本状态的 hooks 来处理我们所有的动画。所以如果你需要复习一下 React Hooks，我推荐这篇文章。

安装和设置

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

$ npx create-react-app react-spring-example
$ cd react-spring-example
$ npm i react-spring

从和到

在我们的 App.js 文件中，我们将需要来自 react-spring 的 useSpring 和 animated。

useSpring 是一个自定义钩子，我们可以设置我们的样式，它需要一个具有 from 和 to 值的对象作为开始和结束状态，而 react-spring 处理他们之间的过渡。 from 和 to 可以获取几乎所有 css 属性的对象：颜色、大小、变换，甚至我们的滚动条。要应用我们的弹簧动画，我们只需将 animated 添加到我们的 HTML 标签中，并将我们的动画传递给我们的样式。默认情况下，它会在组件安装后立即运行。

从一个值到另一个值可能有点无聊，但是 react-spring 让我们可以使用数组来渲染具有多个阶段的动画。请记住始终在您要添加的任何属性中包含起始状态。

应用程序.js

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


const App = () => {
  const animation = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 }
  });

  const colorAnimation = useSpring({
    from: { color: 'blue' },
    to: { color: `rgb(255,0,0)` }
  });

  const multiAnimation = useSpring({
    from: { opacity: 0, color: 'red' },
    to: [
        { opacity: 1, color: '#ffaaee' },
        { opacity: 1, color: 'red' },
        { opacity: .5, color: '#008000' },
        { opacity: .8, color: 'black' }
    ]
  });
  return (
    <div>
      <animated.h1 style={animation}>Hello World</animated.h1>
      <animated.h1 style={colorAnimation}>Hello World</animated.h1>
      <animated.h1 style={multiAnimation}>Hello World</animated.h1>
    </div>
  )
};

export default App;

状态

添加一些本地状态将允许我们向我们的动画添加一些实际的交互，而不是在挂载时转换。我们可以使用三元运算符代替 from 和 to 来制作单步动画。

应用程序.js

import React, { useState } from 'react';

const App = () => {
  const [on, toggle] = useState(false);

  const animation = useSpring({
    color: on ? 'blue' : 'red'
  });
  return (
    <div>
      <animated.h1 style={animation}>{!on ? "I'm red" : "Now I'm blue" }</animated.h1>
      <button onClick={() => toggle(!on)}>Change</button>
    </div>
  )
};

插

除了只为我们的元素和组件添加静态样式更改之外，我们还可以使用 interpolate 方法创建更有趣和可重用的动画。我们可以将变量添加到我们的 spring，因为它也是一个对象，并使用 interpolate 为我们的样式提取它们。

我们只需要从 spring 中提取我们的值并使用 interpolate 对其进行更多解构，将它们放入一些模板文字中，我们就可以开始了。这将允许我们自由设置更多动态值，例如基于 x 位置的颜色值。

应用程序.js

const App = () => {
  const [on, toggle] = useState(false);

  const { xy } = useSpring({
    from: { xy: [0, 0], c: 'green' },
    xy: on ? [800, 200] : [0, 0],
    c: on ? 'red' : 'green'
  });
  return (
    <div>
      <animated.h1
        style={{ 
            transform: xy.interpolate((x, y) => `translate(${x}px, ${y}px)`), 
            color: c.interpolate(c => c)}}>
        {!on ? "I'm here" : "Now I'm over here"}</animated.h1>
      <button onClick={() => toggle(!on)}>Change</button>
    </div>
  )
};

模仿关键帧

interpolate 更有用的方面之一是我们可以模拟 CSS 关键帧。我们不会将值传递给我们的弹簧，而是将其设置为 1 或 0。在我们可以像以前一样对其进行插值之前，我们需要传入一个带有 range 和 output 的对象。 Range 可以是 0 到 1 之间的任何值，就像使用 CSS 关键帧设置断点一样，相应的输出是要预渲染的值。

然后，第二个 interpolate 将在每次输出更改时重置我们的样式。

应用程序.js

const App = () => {
  const [on, toggle] = useState(false)

  const { x, c } = useSpring({
    from: { xy: [0, 0], c: 0 },
    x: on ? 1 : 0,
    c: on ? 1 : 0
  })

  return ( 
    <div>
      <animated.h1
        style={{
          transform: x.interpolate({
            range: [0, .25, .5, .75, 1],
            output: [0, 500, 200, 800, 500]
          }).interpolate(x => `translateX(${x}px)`),

          color: c.interpolate({
            range: [0, .5, 1],
            output: ['red', 'blue', 'green']
          }).interpolate(c => c)
        }}>
        {!on ? "I'm here" : "Now don't know where I'm going"}</animated.h1>
      <button onClick={() => toggle(!on)}>Change</button>
    </div>
  )
}

配置

就其本身而言，前面的例子非常突然和不和谐。这是因为 react-spring 的默认配置。动画主要基于我们可以在 spring 中轻松操作的一些属性。文档有一个很棒的交互式示例，它确实有助于直观地了解不同的属性。

mass：影响速度以及它超过过渡的程度。
tension：影响整体速度。
friction：控制阻力及其减速速度。
clamp：是否应该过冲过渡。

应用程序.js

const animation = useSpring({
    {/* ... */}
    config: {
      mass: 5,
      tension: 50,
      friction: 25,
      clamp: true
    }
  });

为了帮助我们在 react-spring 中的团队，甚至包括一些我们可以导入的配置预设，这将非常有用。

config.default {质量：1，张力：170，摩擦：26}
config.gentle {质量：1，张力：120，摩擦：14}
config.wobbly {质量：1，张力：180，摩擦：12}
config.stiff {质量：1，张力：210，摩擦：20}
config.slow {质量：1，张力：280，摩擦：60}
config.molasses {质量：1，张力：280，摩擦：120}

应用程序.js

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

const animation = useSpring({
    {/* ... */}
    config: config.wobbly
  });

// Or you can just destructure it if you want to change other options 
const animation = useSpring({
    {/* ... */}
    config: {
        ...config.molasses, 
        clamp: true
    }
  });

结论

虽然这里的示例可能不是最华丽的，但我希望它们足以帮助您了解使用 react-spring 的 React 动画背后的基础知识。 ✨