18.07.2024 в 11:31

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

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

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

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

Библиотеки анимации для общего использования

1. Animate.css – Анимация CSS

Animate.css – это популярная CSS-библиотека, которая предоставляет широкий спектр предустановленных анимаций, что позволяет легко применять анимацию в любом веб-проекте. Имея более 80,2 тыс. звезд на GitHub и миллионы загрузок с npm, Animate.css является лучшим выбором для быстрой и простой анимации.

Установка и базовое использование

npm install animate.css

import 'animate.css';

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

Лучший вариант использования

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

Плюсы

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

Минусы

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

2. React Spring

React Spring – это популярная анимационная библиотека для React, предоставляющая мощный и гибкий способ создания анимации на основе физики пружин. Она имеет более 27,8 тысяч звезд на GitHub и широко используется в сообществе React.

Установка и базовое использование

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;

Лучший пример использования

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

Плюсы

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

Минусы

Для новичков процесс обучения может быть сложным.

3. Framer Motion

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, поддержка анимации по ключевым кадрам, отличная документация.

Минусы

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

4. Anime.js

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, может быть сложной для простых анимаций.

5. GSAP (GreenSock Animation Platform)

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

Установка и базовое использование

npm install gsap

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

Лучший пример использования

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

Плюсы

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

Минусы

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

6. Popmotion

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

Установка и базовое использование

npm install popmotion

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

Лучший пример использования

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

Плюсы

Функциональный API, гибкий, масштабируемый и небольшой пакет.

Минусы

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

7. Mo.js

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();

Лучший пример использования

Создание сложной графики движения и анимации.

Плюсы

Универсальная, мощная, отлично подходит для моушн-графики.

Минусы

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

Библиотеки анимации для конкретных случаев использования

8. Remotion – Generate Animation Video with React

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

Установка и базовое использование

# new project
npx create-video@latest
 
# install to existing project
npm i --save-exact remotion@4.0.181 @remotion/cli@4.0.181

remotion/Composition.tsx

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

remotion/Root.tsx

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}
      />
    </>
  );
};

remotion/index.ts

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

Лучший пример использования

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

Плюсы

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

Минусы

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

9. Vivus – SVG Drawing Animation

Vivus – это легкая библиотека JavaScript для анимации SVG. Имея более 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, не подходит для других типов анимации.

10. Lottie for Web – рендеринг анимации After Effects

Lottie – это библиотека для рендеринга анимации, созданной в Adobe After Effects. Имея более 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.

Плюсы

Качественная анимация, хорошо интегрируется с After Effects.

Минусы

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

11. ScrollReveal

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

Установка и базовое использование

npm install scrollreveal

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

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

Лучший пример использования

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

Плюсы

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

Минусы

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

12. ScrollMagic

ScrollMagic – это библиотека для создания взаимодействий и анимации прокрутки. Имея более 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.

Минусы

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

13. Typed.js

Typed.js – это библиотека JavaScript, которая набирает текст, создавая впечатление, что его набирает человек. Имея более 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
});

Лучший пример использования

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

Плюсы

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

Минусы

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

Расширенные библиотеки анимации

14. Three.js – продвинутая 3D-библиотека JavaScript

Three.js – это мощная 3D-библиотека для JavaScript, позволяющая создавать сложные 3D-анимации и визуализации. Имея более 101 тыс. звезд на GitHub, она широко используется для создания 3D веб-приложений.

Установка и базовое использование

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);

Лучший пример использования

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

Плюсы

Чрезвычайно мощная система, обширное сообщество, поддержка сложных 3D-сцен.

Минусы

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

15. Theatre.js

Theatre.js – это продвинутая анимационная библиотека для создания анимации и управления ею программным способом. Имея более 11 тысяч звезд на GitHub, она обеспечивает подход к анимации на основе временной шкалы.

Установка и базовое использование

# r3f and its dependencies
npm install --save react three @react-three/fiber
 
# Theatre.js
npm install --save @theatre/core@0.5 @theatre/studio@0.5 @theatre/r3f@0.5
 
# 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 />)

Лучший пример использования

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

Плюсы

Мощные элементы управления временной шкалой, точные анимационные последовательности.

Минусы

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

Заключение

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

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

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

Спасибо. Хорошего дня!

Источник:

Top 15 Animation Libraries for React & Javascript Apps

#JavaScript #React

Войти на сайт

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

Библиотеки анимации для общего использования

1. Animate.css – Анимация CSS

2. React Spring

3. Framer Motion

4. Anime.js

5. GSAP (GreenSock Animation Platform)

6. Popmotion

7. Mo.js

Библиотеки анимации для конкретных случаев использования

8. Remotion – Generate Animation Video with React

9. Vivus – SVG Drawing Animation

10. Lottie for Web – рендеринг анимации After Effects

11. ScrollReveal

12. ScrollMagic

13. Typed.js

Расширенные библиотеки анимации

14. Three.js – продвинутая 3D-библиотека JavaScript

15. Theatre.js

Заключение

Источник: