15 лучших библиотек анимации для React & современных приложений на JavaScript

Учебники

Проверите оригинальный пост devaradise.com/javascript-react-animation-l.. для лучшего навигации с главным указателем.

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

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

От известных React Spring и Framer Motion до специализированных библиотек, таких как Vivus и Three.js, вы найдете здесь то, что вам нужно, чтобы сделать ваши веб-проекты яркими. Explore этих библиотек и узнайте, как они могут изменить пользовательский опыт вашего сайта!

Animate.css — популярный CSS-библиотека, которая предоставляет широкий выбор предdefinitionнных анимаций, что simplifies применение анимаций к любому веб-проекту. C более чем 80,2 тыс. звездами на GitHub и миллионами download-ов via npm, Animate.css является go-to выбором для быстрой и простой анимации.

npm install animate.css

import 'animate.css';

<div class="animate__animated animate__bounce">An animated element</div>

Animate.css лучше подходит для простых анимаций, которые нужны быть реализованы быстро без необходимости JavaScript.

легко использовать, лёгкий вес, большой выбор анимаций.

Ограниченность CSS-анимациями, меньшее control над поведением анимации.

React Spring — популярная библиотека анимаций для React, предоставляя мощный и flexible способ создания анимаций на основе физики прутки. C более чем 27,8 тыс. звездами на GitHub и широким использованием в сообществе.

npm install @react-spring/web

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

const App = () => {
    const springs = useSpring({
        from: { x: 0 },
        to: { x: 100 }
    });

    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                background: '#ff6d6d',
                borderRadius: 8
            }}
        />
    );
};

export default App;

Создание сложных анимаций с fine-tuned контролем переходов и взаимодействий.

Высокая гибкость, поддержка avanced анимаций, хорошая поддержка сообщества.

легкая трудность для начинающих.

Framer Motion — мощная библиотека анимации, известная своей простотой использования и комплексными функциями. У неё более 22,8 тыс. звезд на GitHub и широко высоко оценена за ее интуитивный API.

npm install framer-motion

import React from 'react';
import { motion } from 'framer-motion';

const App = () => {
    return (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
            Hello, Framer Motion!
        </motion.div>
    );
};

export default App;

Создание гладких и привлекательных анимаций с минимальным кодом.

Интуитивный API, поддержка ключевых кадров анимации, отличная документация.

Несколько больше размера пакета по сравнению с другими библиотеками.

Anime.js — легкая JavaScript-библиотека анимации с мощным API. У неё более 49,2 тыс. звезд на GitHub и широко используется для создания сложных и высоконастраиваемых анимаций.

npm install animejs

import anime from 'animejs/lib/anime.es.js';

anime({
    targets: 'div',
    translateX: 250,
    rotate: '1turn',
    duration: 800
});

Создание тонких и детальных анимаций с точным контролем.

Легкая, гибкая, высоконастраиваемая.

Требует знания JavaScript, может быть сложной для простых анимаций.

GSAP — мощная JavaScript-библиотека анимации, известная своим высоким показателем производительности и обширным набором функций. У нее на GitHub более 19,2 тысяч звезд и широко используется в веб-и мобильных приложениях.

npm install gsap

import { gsap } from 'gsap';

gsap.to('.box', { rotation: 27, x: 100, duration: 1 });

Высокопроизводительные анимации и сложные последовательности.

Очень мощна, надежда, высокая производительность.

Большой размер пакета, требуется время для обучения.

Popmotion — функциональная, гибкая JavaScript-библиотека анимации. Она обеспечивает анимации в Framer Motion. У нее на GitHub более 19,9 тысяч звезд и предлагает целый ряд инструментов для создания анимаций и взаимодействий.Установка и базовая работа

npm install popmotion

import { animate } from 'popmotion';

animate({
    from: 0,
    to: 100,
    onUpdate: (latest) => {
        console.log(latest);
    }
});

Плюсы

Минусы

7.

Mo.js – это набор инструментов для анимации и движения на веб-стране. у него более 18,3 тыс. звезд на GitHub и предлагает различные инструменты для создания анимаций.

npm install @mojs/core

import { Mojs } from '@mojs/core';

const bouncyCircle = new mojs.Shape({
    parent: '#bouncyCircle',
    shape: 'circle',
    fill: { '#F64040': '#FC46AD' },
    radius: { 20: 80 },
    duration: 2000,
    isYoyo: true,
    isShowStart: true,
    easing: 'elastic.inout',
    repeat: 1
});

bouncyCircle.play();

Создание сложных анимаций движения и анимаций.

Universalны, мощный, отлично подходит для анимации движения.

Крутой Learning curve, большой размер пакета.

Remotion позволяет создавать видео программно с использованием React. Это уникальная библиотека с более 19,6 тыс. звезд на GitHub, которая позволяет разработчикам использовать силу React для создания видеоконтента.

# new project
npx create-video@latest

# install to existing project
npm i --save-exact [email protected] @remotion/[email protected]

export const MyComposition = () => {
    return null;
};

import React from 'react';
import {Composition} from 'remotion';
import {MyComposition} from './Composition';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

import { registerRoot } from 'remotion';
import { RemotionRoot } from './Root';
registerRoot(RemotionRoot);

Программное генерирование видео с использованием React.

Уникальная функциональность, использование навыков React, мощные возможности создания видео.

Нишевое использование, может быть сложным для начинающих.

Вивус — это легкая JavaScript-библиотека для анимации SVG. C более 15,1 тыс. звезд на GitHub, это отличный выбор для создания анимаций SVG.

npm install vivus

import Vivus from 'vivus';

new Vivus(
    'my-svg',
    {
        type: 'delayed',
        duration: 200,
        animTimingFunction: Vivus.EASE
    },
    myCallback
);

// svg
<object id='my-svg' type='image/svg+xml' data='link/to/my.svg'></object>;

Создание анимаций рисования для SVG.

Легкая, специализированная для SVG, легка в использование.

Ограничена для SVG, не подходит для других типов анимаций.

Lottie — это библиотека для отображения анимаций, созданных в Adobe After Effects. C более 29,9 тыс. звезд на GitHub, она широко используется для интеграции сложных анимаций.

npm install lottie-web

import lottie from 'lottie-web';
import animationData from './animation.json';

lottie.loadAnimation({
    container: document.getElementById('animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData
});

Интеграция анимаций, созданных в After Effects.

High-quality animations, integrates well with After Effects.

требует After Effects для создания анимаций, большие файлы.

ScrollReveal — JavaScript-библиотека для легкого анимирования элементов, появляющихся или исчезающих из видимости. С более чем 22,2 тыс. звезд на GitHub, она идеальна для анимаций, основанных на прокрутке.

npm install scrollreveal

import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.box', { delay: 500 });

<h1 class="headline">Widget Inc.</h1>

Добавление анимаций прокрутки.

Легко использовать, легкая в сложности, отлично подходит для анимаций прокрутки

Ограничено анимациями, основанными на прокрутке.

ScrollMagic — библиотека для создания взаимодействий и анимаций, основанных на прокрутке. C более чем 14,8 тыс. звезд на GitHub, она предлагает сильные возможности для обработки анимаций, основанных на прокрутке.

npm install scrollmagic

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
    duration: 100, // the scene should last for a scroll distance of 100px
    offset: 50 // start this scene after scrolling for 50px
})
    .setPin('#my-sticky-element') // pins the element for the the scene's duration
    .addTo(controller); // assign the scene to the controller

Создание сложных взаимодействий и анимаций прокрутки.

Возможности, гибкость, хорошо интегрируется с GSAP.

Может быть сложным для простых анимаций, большой размер пакета.

Тyped.js — JavaScript-библиотека, которая типает текст, делая его выглядеть, как если бы его вводил человек. C более 15,1 тыс. звезд на GitHub, она отлична для добавления анимаций набора текста.

npm install typed.js

import Typed from 'typed.js';

const typed = new Typed('#element', {
    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
    typeSpeed: 50
});

Создание анимаций набора текста.

Легко использовать, легкая вязка, отлична для эффектов набора.

Ограничена анимациями набора, меньше гибкости.

Three.js — мощная трёхмерная библиотека JavaScript, которая позволяет создавать сложные трёхмерные анимации и визуализации. C более 101 тыс. звезд на GitHub, она широко используется для трёхмерных web-приложений.

npm install three

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Создание продвинутых трёхмерных анимаций и визуализаций.

Очень мощна, большая сообщество, поддержка сложных трёхмерных сцен.

Сложный learning curve, большая размер пакета.

Театр.js является avanced анимационной библиотекой для создания и управления анимациями программно. C более чем 11k звезд на GitHub, она предоставляет методологию основанную на time-line для анимаций.

# r3f and its dependencies
npm install --save react three @react-three/fiber

# Theatre.js
npm install --save @theatre/[email protected] @theatre/[email protected] @theatre/[email protected]

# Three.js types (when using Typescript)
npm install --save-dev @types/three

import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { getProject } from '@theatre/core'

// our Theatre.js project sheet, we'll use this later
const demoSheet = getProject('Demo Project').sheet('Demo Sheet')

const App = () => {
  return (
    <Canvas
      camera={{
        position: [5, 5, -5],
        fov: 75,
      }}
    >
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  )
}

createRoot(document.getElementById('root')!).render(<App />)

Создание time-line базированных анимаций с тонкой настройкой.

Влажные time-line контролы, точные последовательности анимации.

Новая библиотека, меньшее сообщество, сложна для начинающих.

Выбор правильной анимационной библиотеки зависит от нужд вашего проекта и сложности. Если вы ищете простые, быстрые анимации, CSS-основанные библиотеки, такие как Animate.css, являются идеальными. Чтобы более сложные взаимодействия и высокие потребности производительности, рассмотрите мощные библиотеки, такие как GSAP или Three.js.

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

Есть другие библиотеки, стоит упомянуть? Не задумывайтесь сообщить о них в комментарии ниже! Если вы нашел этот пост полезным, поделитесь им с вашими коллегами-разработчиками и исследователями более подробных руководств на этом сайте.

Спасибо. Добрый день!

Source:
https://devaradise.hashnode.dev/top-15-animation-libraries-for-react-modern-javascript-apps-clyppjb22000b09l26nxe85v7