阅读 971

最受欢迎的5个React动画库

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

参考...

文章分类
前端
文章标签