最受欢迎的 5 个 React 动画库

作者：编程江湖

2021 年 12 月 02 日
本文字数：4718 字
阅读完需：约 15 分钟

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

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 组件：

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 来设置动画和过渡到元素，从而将元素与动画分离。

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 创建基本动画：

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 如何堆叠到其他组件库：

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 应用程序选择正确的库。

发布于: 3 小时前阅读数: 5

编程江湖

关注

IT技术分享 2021.11.23 加入

还未添加个人简介

发布

暂无评论

创作场景

最受欢迎的 5 个 React 动画库

react-spring

Framer Motion

React Transition Group

React-Motion

React Move

结论

编程江湖

评论