Топ-7 лучших библиотек анимации React в 2022 году

Современные пользовательские интерфейсы веб-приложений содержат различные элементы, которые делают их более привлекательными для пользователей. Эти современные требования заставили разработчиков искать новые методы реализации пользовательских интерфейсов с анимацией и переходами.

В результате появились специализированные библиотеки и инструменты для работы с анимацией в веб-приложениях. В этой статье я расскажу о семи лучших библиотеках анимации React, опыт работы с которыми у меня есть, чтобы помочь вам выбрать лучшую для вашего проекта.

1. Framer Motion

Framer Motion — это популярный набор инструментов анимации React, предназначенный для создания простых анимаций. Он имеет два API, которые называются Framer API и Motion API. Framer API отвечает за быстрое взаимодействие, а Motion API обеспечивает жесты и анимацию.

Framer Motion имеет более 15 000 звезд на GitHub и 1,2 миллиона еженедельных загрузок NPM.

Особенности Framer Motion

• Поддержка рендеринга на стороне сервера. Его можно использовать с фреймворками на основе React, такими как Next.js, который поддерживает рендеринг на стороне сервера.
• Цвета легко настраивать и манипулировать ими.
• Хорошая документация, простая для понимания.
• Поддержка TypeScript.
• Помощники для сложной, основанной на физике анимации.
• Пользователям нужно только задать правильные конфигурации. Motion API автоматически генерирует анимацию.

Установка

Вы можете легко установить Framer Motion с помощью NPM или Yarn следующим образом.

// NPM
npm install framer-motion  
// Yarn
yarn add framer-motion

Использование

После установки вы можете импортировать Framer Motion в свой компонент React, как показано ниже. Этот пример показывает, как увеличить или уменьшить масштаб кнопки при наведении.

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

export default function App() {
  return (
    <div className="my-container">
      <motion.div whileHover={{ scale: 1.2 }} whileTap={{ scale: 0.8 }} />
    </div>
  );
}

Вы можете найти демонстрацию этого примера на Stackblitz.

2. react-spring

react-spring — это современная библиотека анимации, основанная на физике пружин. Она довольно гибкая и имеет несколько удивительных функций, включая хуки, чтобы помочь разработчикам.

У react-spring более 23 700 звезд на GitHub и 700 00+ еженедельных загрузок NPM.

Особенности react-spring

• Всего есть 5 хуков (useChain , useSpring , useSprings , useTrail , useTransition ) для различных ситуаций.
• Предустановленные конфигурации.
• Пользователи могут быстро создавать анимации, предоставляя реквизиты заранее определенным компонентам.
• Кросс-платформенная поддержка, включая веб-приложения и приложения, разработанные собственными силами.
• Поддержка Jest для тестирования.

Установка

Вы можете легко установить react-spring с помощью NPM или Yarn следующим образом.

// NPM
npm install react-spring  
// Yarn
yarn add react-spring

Использование

После установки вы можете импортировать react-spring в свой React-компонент, как показано ниже. Этот пример показывает, как создать анимацию затухания.

import React from 'react';
import './style.css';
import { useSpring, animated } from '@react-spring/web';

export default function App() {
  const styles = useSpring({
    loop: true,
    from: { opacity: '0' },
    to: { opacity: '1' },
    config: { duration: '2000' },
  });

  return (
    <animated.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'red',
        borderRadius: 50,
        ...styles,
      }}
    />
  );
}

Вы можете найти демонстрацию предыдущего примера на Stackblitz.

3. Remotion

Remotion позволяет разработчикам создавать видео и анимацию, используя знакомые языки, такие как CSS, HTML, JavaScript и TypeScript. Таким образом, разработчикам не нужны никакие знания о создании видео. Вместо этого они могут использовать свои знания программирования для создания анимации и видео с помощью Remotion.

Remotion имеет более 13 000 звезд на GitHub и 5 000+ еженедельных загрузок NPM.

Особенности Remotion

• Поддержка таких функций React, как многоразовые компоненты, мощные композиции и быстрая перезагрузка.
• Не требуется предварительного опыта редактирования видео.
• Вы можете использовать плеер Remotion для воспроизведения и оценки ваших видео в браузере.
• Вы можете использовать такие возможности кодирования, как переменные, алгоритмы, функции и API для добавления новых эффектов.
• Поддержка рендеринга на стороне сервера.

Использование

Remotion имеет две зависимости. Перед его использованием необходимо установить FFmpeg и Node.js. После этого вы можете легко создать новый проект React с Remotion с помощью NPM или Yarn.

// NPM
npm init video  
// Yarn
yarn create video

После создания проекта вы можете запустить приложение с помощью npm run start. Это откроет для вас плеер Remotion. Затем вы можете импортировать Remotion в компонент и использовать его следующим образом.

import { useCurrentFrame } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  return (
    <div style={{flex: 1,
        textAlign: "left",
        fontSize: "10px",
      }}
    >
       Welcome to Remotion.
    </div>
  );
};

4. React-Motion

React-Motion — это набор инструментов для анимации, который значительно упрощает создание и реализацию реалистичной анимации. Однако React-Motion может быть трудно понять новичкам. Но у него есть хорошая документация с богатыми примерами, чтобы помочь разработчикам.

React-Motion имеет более 21 000 звезд на GitHub и 570 000 еженедельных загрузок NPM.

Особенности React-Motion

• 5 компонентов с уникальным назначением: spring, Motion, StaggeredMotion, TransitionMotion и пресеты.
• Поддержка TypeScript.
• Нет необходимости в жестко закодированных кривых смягчения и длительности.
• Концепции физики могут быть использованы для обеспечения прерывистой анимации.
• Альтернатива React TransitionGroup.

Установка

Вы можете легко установить React-Motion с помощью NPM или Yarn следующим образом.

// NPM
npm i react-motion  
// Yarn
yarn add react-motion

Использование

После установки вы можете импортировать React-Motion в свой компонент React, как показано ниже. В этом примере показано, как создать анимацию переключения при нажатии на кнопку.

import React from 'react';
import {Motion, spring} from 'react-motion'; 

export default class Toggle extends React.Component { 

  constructor(props) { 
    super(props); 
    this.state = {open: false}; 
  };

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

  touchStart = (e) => { 
    e.preventDefault(); 
    this.handleMouseDown(); 
  };

  render() { 
    return ( 
      <div> 
        <button 
          onMouseDown={this.mouseDown} 
          onTouchStart={this.touchStart}> 
            Toggle 
        </button>
        <Motion 
          style={{x: spring(this.state.open ? 400 : 0)}}> 
          {({x}) => 
            <div> 
              <div
                style={{ 
                  WebkitTransform: `translate3d(${x}px, 0, 0)`,
                  transform: `translate3d(${x}px, 0, 0)`, 
                }} 
              /> 
            </div> 
          } 
        </Motion> 
      </div> 
    ); 
  };
}

Вы можете найти демонстрацию этого примера на Stackblitz.

5. React Move

React Move — это библиотека React, которая позволяет создавать привлекательные анимации, управляемые данными. Это легковесная библиотека, которая имеет события жизненного цикла на переходах.

React Move имеет более 6 500 звезд на GitHub и 90 00 еженедельных загрузок NPM.

Особенности React Move

• Поддерживаются React, React-Native и React-VR.
• Поддерживается TypeScript.
• События жизненного цикла для анимации: начало, прерывание и конец.
• Возможность создания пользовательских твитов.

Установка

Вы можете легко установить React Move с помощью NPM следующим образом.

npm i react-move

Использование

После установки вы можете использовать React Move в своем приложении React, как показано ниже. Этот пример показывает, как создать анимацию переключения при нажатии на кнопку.

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

const outerDiv = {
  borderRadius: 3,
  backgroundColor: 'rgba(128,128,128)',
  position: 'relative',
  margin: '5px 3px 10px',
  width: 200,
  height: 40,
}

class Toggle 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={outerDiv}>
                 <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 Toggle;

Вы можете найти демонстрацию этого примера на Stackblitz.

6. react-anime

react-anime — это простая библиотека анимации, вдохновленная anime.js. Она оборачивает anime.js компонентом React и позволяет разработчикам легко передавать реквизиты для создания анимации.

У react-anime более 4 000 еженедельных загрузок NPM.

Особенности react-anime

• Простота в использовании. Вы можете анимировать что угодно, обернув это компонентом.
• Возможность анимировать CSS, SVG и атрибуты DOM, просто используя реквизиты.
• Поддержка TypeScript.

Установка

Вы можете легко установить react-anime с помощью NPM следующим образом.

npm i react-anime

Использование

После установки вы можете использовать react-anime в своем React-приложении.

import React from 'react';
import Anime, {anime} from 'react-anime';

const App = (props) => (
     <Anime
      easing="easeOutElastic"
      loop={true}
      duration={1000}
      direction="alternate"
      delay={(el, index) => index * 240}
      translateX="13rem"
      scale={[0.75, 0.9]}
     >

      <div className="blue" />
      <div className="green" />
      <div className="red" />
    </Anime>
);

Вы можете найти множество примеров react-anime на CodePen.

7. React Awesome Reveal

React Awesome Reveal — это пакет TypeScript, который обеспечивает анимацию раскрытия, используя API Intersection Observer для обнаружения появления элементов в области просмотра. Анимации предоставлены Emotion и реализованы как CSS-анимации, что позволяет использовать преимущества аппаратного ускорения.

React Awesome Reveal имеет более 10 000 еженедельных загрузок NPM.

Особенности React Awesome Reveal

• Поддержка рендеринга на стороне сервера и TypeScript.
• Не требует установки зависимостей.
• Позволяет определять пользовательские анимации.
• Поддержка встряхивания деревьев.
• Быстрый и легкий.
• Все основные браузеры теперь поддерживают API Intersection Observer и CSS-анимации.

Установка

Вы можете легко установить React Awesome Reveal с помощью NPM или Yarn следующим образом.

//NPM
npm i react-awesome-reveal
//Yarn
yarn add react-awesome-reveal

Использование

После установки вы можете использовать React Awesome Reveal в своем React-приложении.

import React, { Component } from "react";
import { Slide } from "react-awesome-reveal";

class App extends Component {
  render() {
    return (
      <Slide triggerOnce>
        <ul >
          <li> Item 1 </li>
          <li> Item 2 </li>
          <li> Item 3 </li>
          <li> Item 4 </li>
        </ul>
      </Slide>
    );
  }
}

export default App ;

Вы можете найти демонстрацию этого примера на Stackblitz.

Заключение

В этой статье я рассказал о семи замечательных библиотеках анимации React с уникальными возможностями. Надеюсь, мои описания помогли вам выбрать лучшую библиотеку анимации React для вашего проекта. Спасибо за прочтение.

Набор Syncfusion Essential Studio for React предлагает более 70 высокопроизводительных, легких, модульных и отзывчивых компонентов пользовательского интерфейса в одном пакете. Это единственный набор, который вам когда-либо понадобится для создания полноценного приложения.

Если у вас есть вопросы, вы можете связаться с нами через форум поддержки, портал поддержки или портал обратной связи. Мы всегда рады помочь вам!

Похожие блоги

• Функциональное реактивное программирование с потоками Node.js
• Recoil: будущее управления состояниями для React?
• Реализация пользовательских крючков React: Полное руководство
• 5 лучших библиотек для загрузки React Lazy на 2022 год