使用 React Spring 介绍 React 中的动画

在本文中,我们将探索 React 的最佳动画框架之一: React Spring。

前提条件

React Spring 既具有基于夹克和基于组件的 API,我们将专门考虑在所有动画中使用具有基本状态的夹克,所以如果您需要在 React Hooks 上进行一些刷刷,我建议这篇文章。

安装与安装

当然,我们将需要反应春天,我们可以使用 Create React App来开始。

1$ npx create-react-app react-spring-example
2$ cd react-spring-example
3$ npm i react-spring

从和到

在我们的App.js文件中,我们将需要useSpring和动画从反应春天。

useSpring是一个自定义的链接,我们可以将我们的风格设置为,它需要一个具有从和到值的对象作为开始和结束状态,而反应春节处理它们之间的过渡。从和到可以接收几乎每个 CSS 属性的对象:颜色,大小,转换,甚至我们的滚动栏。为了应用我们的春季动画,我们只需要在我们的 HTML 标签中添加动画,并将我们的动画传递到我们的风格。

从一个值转到另一个值可能有点无聊,但反应春天允许我们使用数组来渲染具有多个阶段的动画。

 1[label App.js]
 2import React, { useState } from 'react';
 3import { useSpring, animated } from 'react-spring';
 4
 5const App = () => {
 6  const animation = useSpring({
 7    from: { opacity: 0 },
 8    to: { opacity: 1 }
 9  });
10
11  const colorAnimation = useSpring({
12    from: { color: 'blue' },
13    to: { color: `rgb(255,0,0)` }
14  });
15
16  const multiAnimation = useSpring({
17    from: { opacity: 0, color: 'red' },
18    to: [
19        { opacity: 1, color: '#ffaaee' },
20        { opacity: 1, color: 'red' },
21        { opacity: .5, color: '#008000' },
22        { opacity: .8, color: 'black' }
23    ]
24  });
25  return (
26    <div>
27      <animated.h1 style={animation}>Hello World</animated.h1>
28      <animated.h1 style={colorAnimation}>Hello World</animated.h1>
29      <animated.h1 style={multiAnimation}>Hello World</animated.h1>
30    </div>
31  )
32};
33
34export default App;

国家

添加一些本地状态将允许我们为我们的动画添加一些实际的互动,而不是在安装上过渡。

 1[label App.js]
 2import React, { useState } from 'react';
 3
 4const App = () => {
 5  const [on, toggle] = useState(false);
 6
 7  const animation = useSpring({
 8    color: on ? 'blue' : 'red'
 9  });
10  return (
11    <div>
12      <animated.h1 style={animation}>{!on ? "I'm red" : "Now I'm blue" }</animated.h1>
13      <button onClick={() => toggle(!on)}>Change</button>
14    </div>
15  )
16};

互联

除了仅仅将静态风格更改添加到我们的元素和组件之外,我们还可以使用交叉方法创建更有趣和可重复使用的动画,我们可以将变量添加到我们的喷泉中,因为它也是一个对象,并使用交叉来为我们的风格提取它们。

我们只需要从我们的泉源中提取我们的价值,并使用交叉来进一步破坏它,把它们扔进一些(https://andsky.com/tech/tutorials/js-template-literals-es6)的字母(https://andsky.com/tech/tutorials/js-template-literals-es6)中,我们很好。

 1[label App.js]
 2const App = () => {
 3  const [on, toggle] = useState(false);
 4
 5  const { xy } = useSpring({
 6    from: { xy: [0, 0], c: 'green' },
 7    xy: on ? [800, 200] : [0, 0],
 8    c: on ? 'red' : 'green'
 9  });
10  return (
11    <div>
12      <animated.h1
13        style={{ 
14            transform: xy.interpolate((x, y) => `translate(${x}px, ${y}px)`), 
15            color: c.interpolate(c => c)}}>
16        {!on ? "I'm here" : "Now I'm over here"}</animated.h1>
17      <button onClick={() => toggle(!on)}>Change</button>
18    </div>
19  )
20};

标签: Keyframes

一个更有用的方面是,我们可以模拟CSS键盘(https://andsky.com/tech/tutorials/css-defining-animation-keyframes)。而不是将一个值传入我们的春天,我们只会将其设置为1或0。在我们可以像以前那样插入它之前,我们需要通过一个具有范围和输出的对象。

然后,第二个交叉将重置我们的风格,每次输出变化。

 1[label App.js]
 2const App = () => {
 3  const [on, toggle] = useState(false)
 4
 5  const { x, c } = useSpring({
 6    from: { xy: [0, 0], c: 0 },
 7    x: on ? 1 : 0,
 8    c: on ? 1 : 0
 9  })
10
11  return ( 
12    <div>
13      <animated.h1
14        style={{
15          transform: x.interpolate({
16            range: [0, .25, .5, .75, 1],
17            output: [0, 500, 200, 800, 500]
18          }).interpolate(x => `translateX(${x}px)`),
19
20          color: c.interpolate({
21            range: [0, .5, 1],
22            output: ['red', 'blue', 'green']
23          }).interpolate(c => c)
24        }}>
25        {!on ? "I'm here" : "Now don't know where I'm going"}</animated.h1>
26      <button onClick={() => toggle(!on)}>Change</button>
27    </div>
28  )
29}

配置

本身,前面的例子是非常陡峭和令人震惊的. 这是因为反应春的默认配置. 动画主要是基于我们在我们的春天可以轻松操纵的几个属性。

质量:影响速度以及它超越过渡的速度
电压:影响整体速度
摩擦:控制阻力以及它放缓的速度
紧张:是否应该超越过渡

 1[label App.js]
 2const animation = useSpring({
 3    {/* ... */}
 4    config: {
 5      mass: 5,
 6      tension: 50,
 7      friction: 25,
 8      clamp: true
 9    }
10  });

为了帮助我们在反应春季的团队甚至包括了一些配置预设,我们可以导入,这将是非常有用的。

config.default { mass: 1, tension: 170, friction: 26 }
config.gentle { mass: 1, tension: 120, friction: 14 }
config.wobbly { mass: 1, tension: 180, friction: 12 }
config.stiff { mass: 1, tension: 210, friction: 20 }
config.slow { mass: 1, tension: 280, friction: 60 }
config.molasses { mass: 1, tension: 280, friction: 120 }

 1[label App.js]
 2import { useSpring, animated, config } from 'react-spring';
 3
 4const animation = useSpring({
 5    {/* ... */}
 6    config: config.wobbly
 7  });
 8
 9// Or you can just destructure it if you want to change other options 
10const animation = useSpring({
11    {/* ... */}
12    config: {
13        ...config.molasses, 
14        clamp: true
15    }
16  });

结论

虽然这里的示例可能不是最闪闪发光的,但我希望它们足以帮助您理解React动画使用react-spring背后的基本知识。