最受欢迎的5个React动画库

最受欢迎的5个React动画库

GoSolo

2021-03-2917,934阅读3分钟

 

React是用于构建用户界面的库。对于React前端开发人员而言，从动画文本或图像到复杂的3D动画，在网页上实现动画是您日常工作不可或缺的一部分。动画可以在构建React应用程序时帮助改善整体用户体验。

在本文中，我们将比较排名前五的5个React动画库，并对每个库的流行度，开发人员经验，可读性，文档和包大小进行评估，以帮助您为下一个React项目选择合适的库。

react-spring

react-spring 是基于弹簧物理学的现代动画库。它具有高度的灵活性，可涵盖用户界面 所需的大多数动画。react-spring 从 React Motion 继承了一些属性，例如易用性，插值和性能。

要查看react-spring的运行情况，请使用以下命令之一进行安装：

npm install react-spring Oryarn add react-spring

接下来，添加以下代码以创建文本并为其设置动画：Hello React Spring

 

js

代码解读

复制代码

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { useSpring, animated } from 'react-spring';
import './styles.css';

function SpringDemo() {
  const [state, toggle] = useState(true)
  const { x } = useSpring({ from: { x: 0 }, x: state ? 1 : 0, config: { duration: 1000 } })
  return (
    <div onClick={() => toggle(!state)}>
      <animated.div
        style={{
          opacity: x.interpolate({ range: [0, 1], output: [0.3, 1] }),
          transform: x
            .interpolate({
              range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
              output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
            })
            .interpolate(x => `scale(${x})`)
        }}>
        Hello React Spring
      </animated.div>
    </div>
  )
}

export default SpringDemo

在上面的代码中，首先，我们将 useSpring 从 react-spring 导入并设置了动画。接下来，使用useState钩子初始化对象x。使用插值，我们将多个动画值作为范围并输出以形成一个缩放为x的结果。

插值功能使您可以采用多个值并形成一个结果。react-spring中的插值还可以用于一系列状态，例如CSS关键帧和颜色。大多数动画是通过将动画包装在有动画效果的div组件中完成的。

react-spring为动画React应用程序提供了一个强大的平台。它的道具和方法是可读的，也很容易理解。

让我们看看react-spring与其他React动画库相比如何：

• 流行：GitHub上有19000万颗星，每周NPM上下载超过475,278 ；由Aragon，CodeSandbox，Next.js等公司和初创公司使用
• 文档：编写精巧且易于初学者使用的文档，react -spring的文档可让您从文档中复制代码片段并测试或预览CodeSandbox
• 捆绑包大小（最小）：react-spring 26.7kb！

Framer Motion

Framer Motion是一个流行的React动画库，可轻松创建动画。它拥有简化的API，可以抽象出动画背后的复杂性，并允许开发人员轻松创建动画。更好的是，它支持服务器端渲染，手势和CSS变量。

要安装Framer Motion，请在终端上运行以下两个命令之一：

npm install framer-motion Oryarn add framer-motion

接下来，添加以下代码块，以将简单的动画添加到box组件：

 

js

代码解读

复制代码

import React from "react";
import { motion } from "framer-motion";
import "./styles.css";

export default function App() {
  const [isActive, setIsActive] = React.useState(false);
  return (
    <motion.div
      className="block"
      onClick={() => setIsActive(!isActive)}
      animate={{
        rotate: isActive ? 180 : 360
      }}
    >
      Hello Framer motion
    </motion.div>
  );
}

与react-spring相似，Framer Motion提供了用于动画的内置组件。用于包装对象以进行动画处理。它可以帮助您更快地对组件和元素进行样式设置，还可以提高代码的可读性。不利的一面是，随着动画元素的增加，它可能会变得笨重。总体而言，Framer Motion是一个非常强大，高度可定制且功能强大的库：motion.div

• 受欢迎程度：在GitHub上有8.4k颗星，在NPM上每周有292,291次以上的下载
• 文档：易于理解，适合初学者；您可以在文档中找到给定组件的源代码，甚至可以在CodeSandbox中查看它
• 捆绑包大小（最小）：成帧器运动最小为90.8kb！

Framer Motion具有更大的捆绑包大小，在受欢迎程度和星级方面不如React Spring受欢迎，但是它的文档更容易理解，值得您在下一个React项目中考虑。

React Transition Group

React Transition Group是通过将样板代码的需求减少到最接近的最小值来进行开发的工具。与其他许多React动画库（例如react-spring）不同，React Transition Group提供了用于定义动画的简单组件，该库并未定义样式本身，而是以有用的方式操作DOM，从而使过渡和动画的实现更加舒适。换句话说，React Transition Group提供了一种更简单的动画和过渡方法。

在终端中运行以下命令之一以安装React Transition Group：

npm i react-transition-group Oryarn add react-transition-group

React Transition Group使用内置组件Transition来设置动画和过渡到元素，从而将元素与动画分离。

 

js

代码解读

复制代码

import React from "react";
import ReactDOM from "react-dom";
import { Transition } from "react-transition-group";
import "./styles.css";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      in: false
    };
  }
  componentDidMount() {}
  onClick = () => {
    this.setState(state => ({ in: !state.in }));
  };
  render() {
    return (
      <div className="App">
        <button onClick={this.onClick}>BUTTON</button>
        <Transition in={this.state.in} timeout={5000} mountOnEnter appear>
          {state => <div className={`item item--${state}`} />}
        </Transition>
      </div>
    );
  }
}

export default app;

React Transition Group使用内置组件Transition来设置动画和过渡到元素，从而将元素与动画分离。

现在获取报告卡：

• 流行：7.9k GitHub明星，每周在NPM上的下载量超过620万！
• 文档：文档对初学者友好；示例清晰易懂，并且可以通过Codesandbox示例轻松理解
• 捆绑大小（最小）：react-transition-group 14.2kb！
• 对Typescript的支持：React过渡组随附了TypeScript的后备支持，可以使用以下命令进行安装：

npm i @types/react-transition-group

React Transition Group是一个很好的动画库，并且包很小。它是最受欢迎的动画库之一，应该在下一个React项目中考虑使用。

React-Motion

React-Motion是一个动画库，拥有一种更轻松的方法来创建和实现逼真的动画。React-Motion利用物理学来为React元素创建几乎自然的动画。

安装React-Motion并通过在终端上运行以下命令来创建基本动画：

yarn add react-motion Ornpm i react-motion

接下来，像以前一样，添加此代码块以使用React Transition Group创建基本动画：

 

js

代码解读

复制代码

import React from 'react'
import { StaggeredMotion, spring } from 'react-motion'
const AnimatedGridContents = props => {
  return (
    <StaggeredMotion
      defaultStyles={props.items.map(() => ({ opacity: 1, translateY: -30 }))}
      styles={prevInterpolatedStyles =>
        prevInterpolatedStyles.map((_, i) => {
          return i === 0
            ? { opacity: spring(1), translateY: spring(0) }
            : {
              opacity: prevInterpolatedStyles[i - 1].opacity,
              translateY: spring(prevInterpolatedStyles[i - 1].translateY)
            }
        })
      }
    >
      {interpolatingStyles => (
        <div className="grid">
          {interpolatingStyles.map((style, i) => (
            <div
              className="card"
              key={props.items[i]}
              style={{
                opacity: style.opacity,
                transform: `translateY(${style.translateY}px)`
              }}
            >
              {props.items[i]}
            </div>
          ))}
        </div>
      )}
    </StaggeredMotion>
  )
}

在上面的代码块中，使用StaggeredMotion，我们向卡组件添加了过渡效果。使用React-Motion，您可以利用简化React中动画组件的API。

现在让我们分析一下React-Motion的流行度和代码质量：

• 人气：GitHub上有19.2万颗星，NPM上有603199次下载
• 文档：文档是交互式的。您可以从文档中复制给定组件的源代码
• 捆绑包大小（最小化）：reaction-motion 19.8kb

总体而言，React-Motion是一个适用于您的React应用程序的声音动画库，尤其是其几乎逼真的动画行为。

React Move

React Move是一个库，用于为React创建漂亮的数据驱动动画。它旨在支持开箱即用的TypeScript并支持自定义补间功能，补间是中间化的缩写，它是生成关键帧的过程，关键帧是图像之间的帧。React Move在其过渡上还具有生命周期事件，您还可以在React Move中的动画中传递自定义补间。

让我们看看React Move如何堆叠到其他组件库：

 

js

代码解读

复制代码

import React, { PureComponent } from 'react'
import { Animate } from 'react-move'
import { easeExpOut } from 'd3-ease'

const trackStyles = {
  borderRadius: 4,
  backgroundColor: 'rgba(255, 255, 255, 0.7)',
  position: 'relative',
  margin: '5px 3px 10px',
  width: 250,
  height: 50,
}

class Example extends PureComponent {
  state = {
    open: false,
  }

  handleClick = () => {
    this.setState({ open: !this.state.open })
  }

  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Toggle
        </button>
        <Animate
          start={() => ({
            x: 0,
          })}

          update={() => ({
            x: [this.state.open ? 200 : 0],
            timing: { duration: 750, ease: easeExpOut },
          })}
        >
          {(state) => {
            const { x } = state

            return (
              <div style={trackStyles}>
                <div
                  style={{
                    position: 'absolute',
                    width: 50,
                    height: 50,
                    borderRadius: 4,
                    opacity: 0.7,
                    backgroundColor: '#ff69b4',
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                />
              </div>
            )
          }}
        </Animate>
      </div>
    )
  }
}

export default Example

• 受欢迎程度：在GitHub上有6.2k颗星，在NPM上每周有117,029多个下载！React Move在开发者社区中越来越受欢迎
• 文档：文档非常好；React Move提供了代码，并提供了在CodeSandbox上对其进行测试的机会
• 捆绑包大小（最小）：react-move 12.7kb！

React Move可用于各种React动画和过渡。它的自定义补间效果更加出色，这使开发人员可以在自己的React应用程序中自定义动画。

结论

无论项目如何，您都在努力。许多动画库也可以帮助您轻松快速地创建用户友好的动画和过渡。这些库中有很多都是可自定义的，并且包含出色的内置功能和更改。希望通过这种比较，您可以为下一个React应用程序选择正确的库。

参考...