React — это библиотека для создания пользовательских интерфейсов. Для фронтенд-разработчиков React внедрение анимации на веб-страницах — неотъемлемая часть вашей повседневной работы, от анимированного текста или изображений до сложных 3D-анимаций. Анимации могут помочь улучшить общее взаимодействие с пользователем при создании приложений React.
В этой статье мы сравним 5 лучших анимационных библиотек React и оценим каждую библиотеку на предмет популярности, опыта разработчиков, удобочитаемости, документации и размера пакета, чтобы помочь вам выбрать подходящую библиотеку для вашего следующего проекта React.
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:
- Популярность: 190 миллионов звезд на GitHub и более 475 278 еженедельных загрузок на NPM; используется такими компаниями и стартапами, как 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
Затем добавьте следующий блок кода, чтобы добавить простую анимацию к компоненту коробки:
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
- Популярность: 8,4 тыс. звезд на GitHub, более 292 291 загрузок в неделю на NPM.
- Документация: проста для понимания и подходит для начинающих; вы можете найти исходный код для данного компонента в документации или даже просмотреть его в CodeSandbox.
- Размер пакета (минимум): Framer motion минимум 90,8кб!
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,9 тыс. звезд на GitHub, более 6,2 млн загрузок в неделю на NPM!
- Документация: документация удобна для начинающих; примеры понятны и просты для понимания с примерами 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 вы можете воспользоваться преимуществами API, которые упрощают анимацию компонентов в React.
Теперь проанализируем популярность и качество кода React-Motion:
- Популярность: 192 000 звезд на GitHub, 603 199 загрузок на NPM.
- Документация: Документация интерактивна. Вы можете скопировать исходный код данного компонента из документации
- Размер пакета (уменьшенный): реакция-движение 19,8кб
В целом, 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
- Популярность: 6,2 тысячи звезд на GitHub, более 117 029 загрузок в неделю на NPM! React Move набирает популярность в сообществе разработчиков
- Документация: документация отличная; React Move предоставляет код и возможность протестировать его в CodeSandbox.
- Размер пакета (минимальный): react-move 12,7кб!
React Move можно использовать для различных анимаций и переходов React. Это еще лучше с настраиваемой анимацией, которая позволяет разработчикам настраивать анимацию в своих собственных приложениях React.
В заключение
Независимо от проекта, вы работаете над ним. Многие библиотеки анимации также помогают легко и быстро создавать удобные для пользователя анимации и переходы. Многие из этих библиотек являются настраиваемыми и содержат отличные встроенные функции и изменения. Надеемся, что с помощью этого сравнения вы сможете выбрать правильную библиотеку для своего следующего приложения React.