5 современных способов создания анимации в React
Часто разработчики анимируют с помощью CSS, добавляя классы в теги HTML. Для сложных анимаций это не подойдёт. В статье рассмотрим более продвинутые методы.
96К открытий102К показов
Создание анимации в приложении React — популярная тема. Многие разработчики анимируют только с помощью CSS, добавляя классы в теги HTML. Это отличный способ, но если хотите создавать сложные анимации, обратите внимание на другие подходы.
Давайте поговорим о них.
Примечание: весь код из статьи вы можете найти в этом репозитории.
1. Метод CSS
Это один из лучших методов для простой анимации. Если вы используете его вместо импорта библиотек JavaScript, сборка остаётся маленькой и браузер тратит меньше ресурсов. Это сильно влияет на производительность приложений. Если у вас простая анимация и вы беспокоитесь о размере своей сборки, обратите внимание на этот метод.
Давайте посмотрим на пример гамбургер-меню:
Это простое меню со свойством css и триггером className = "is-nav-open"
для тега html. Способов реализации много. Один из них — создать wrapper
над навигацией и вызывать изменения полей. Навигация имеет постоянную ширину, равную 250px
, и wrapper
со свойством margin-left
или translateX
с той же шириной. Если нужно показать навигацию, следует добавить className = "is-nav-open"
для wrapper
и переместить wrapper
на margin-left / translateX: 0;
И CSS стили:
Этот метод необходим в большинстве случаев. Лучше написать несколько строк CSS и изменять className
, чем импортировать и использовать большие библиотеки. А пользователи будут благодарны за то, что приложение быстро работает в браузере.
2. ReactTransitionGroup
Этот дополнительный компонент был разработан парнями из сообщества ReactJs. ReactTransitionGroup легко реализует базовые CSS-анимации и переходы.
Разработчики описывают эту библиотеку так:
Набор компонентов для управления состояниями с течением времени, специально разработанный для анимаций.
Три вещи, которые вы должны знать об этом компоненте:
ReactTransitionGroup
меняет классы при изменении жизненного цикла компонента. Анимированный стиль, в свою очередь, должен быть описан в классах CSS.ReactTransitionGroup
имеет небольшой размер. Он должен быть установлен в пакете для React приложения и несущественно увеличит вашу сборку. Также можно использовать CDN.ReactTransitionGroup
имеет 3 компонента (Transition
,CSSTransition
иTransitionGroup
). Чтобы запустить анимацию, нужно обернуть компонент в них.
Посмотрим, как сделать похожую анимацию.
Сначала нужно импортировать CSSTransitionGroup
из react-transition-group
. Затем вы должны обернуть список и установить свойство transitionName
. Каждый раз, когда добавляется или удаляется дочерний элемент в CSSTransitionGroup
, он получает стили анимации.
Если вы установили свойство transitionName = "example"
, классы в таблицах стилей должны начинаться с имени примера.
Вы можете увидеть базовое использование ReactTransitionGroup
.
Конечно, надо добавить немного логики. Следует описать два метода для реализации нашего примера списка контактов:
handleAdd
— добавляет новые контакты, получает случайное имя и помещает его в массив state.items
. (для случайного имени используется пакет random-name
).
handleRemove
— удаление контакта по индексу в массиве state.items
.
3️. React-animations
React-animations — библиотека, построенная на анимациях из animate.css. Она проста в использовании и имеет множество коллекций анимации. React-animation работает с любой inline-style библиотекой, которая поддерживает использование объектов для определения ключевых кадров анимации, таких как Radium, Aphrodite или styled-components.
Можете посмотреть на анимации в гифке:
Давайте посмотрим, как это работает. Например, анимация подпрыгивания.
Сначала нужно импортировать выбранную анимацию из react-animations
.
Когда компонент создан, нужно обернуть любой HTML-код или компонент для анимации.
Пример:
Анимация работает. Она базовая и очень простая.
Есть хорошее решение для использования этой анимации при прокрутке — react-animate-on-scroll.
4️. React-reveal
React Reveal — это анимационный фреймворк для React. В нём есть основные анимации, такие как постепенное исчезновение, отражение, масштабирование, вращение и другие более сложные анимации. Он позволяет управлять всеми анимациями с помощью props, например, задавать дополнительные настройки: положение, задержка, расстояние, каскад и многие другие. Можно увидеть их здесь. Также можно использовать кастомные эффекты CSS, серверный рендеринг и компоненты высокого порядка. Если вы предпочитаете использовать анимацию прокрутки — этот фреймворк для вас.
Давайте посмотрим на эту анимацию прокрутки.
У нас есть 5 блоков, у каждого из которых полноэкранная страница и заголовок внутри.
Мы создаём константу animateList
. Этот массив содержит 5 элементов. После использования метода массива map
вы можете рендерить каждый элемент в компонентах Fade
и вставить элементы в заголовок. Стили, определённые в константе styles
, имеют короткие стили CSS для блока и заголовка. У нас есть 5 блоков с анимацией Fade
сверху.
5️. TweenOne и анимация в Ant Design
Ant Design — это библиотека React UI, представляющая собой множество простых в использовании компонентов. Это полезный компонент для создания элегантных пользовательских интерфейсов. Ant Design создан китайским конгломератом Alibaba, который использует его во многих своих проектах.
Давайте рассмотрим анимацию на их лендинге.
Как видите, здесь много анимированных элементов. Рассмотрим короткую версию, потому что у всех элементов одинаковая анимация. Наша анимация будет выглядеть так:
В этой анимации использован компонент TweenOne
, но ему нужен PathPlugin
для задания траектории. Это будет работать, когда вы поместите PathPlugin
в TweenOne.plugins
.
Основные параметры анимации:
- duration — время анимации в мс;
- ease — плавность анимации;
- yoyo — чередование движения вперёд и назад с каждым повторением;
- repeat — повтор анимации. Нужно использовать
-1
для бесконечной анимации; - p — координаты пути для анимации;
- easePath — координаты плавного пути для анимации.
Не нужно беспокоиться о последних двух параметрах, более специфичных для данного svg.
Далее создадим объект анимации. Этот объект имеет 3 типа анимации:
- redSquare — в нём есть параметры цикла, а также координата Y, длительность и задержка;
- greenBall — имеет путь с параметрами объекта x, y — значение p. Длительность, повтор и плавность —
TweenOne.easing.path
— функция с двумя параметрами:path — координата easePath;lengthPixel — кривая, разделённая на 400 секций; - track — овал с осями, который имеет стили цикла и параметр поворота.
Обратите внимание на компонент TweenOne
. Напомним вкратце, эти компоненты будут импортированы из rc-tween-one
. Он используется в качестве базового компонента с базовыми props
и анимационными props
. Это и есть наша анимация. Каждый TweenOne
имеет свои собственные правила анимации, такие как redSquare
, track
, greenBall
.
Выглядит пугающе. Но на самом деле нужно обратить внимание на эти строки.
Анимировать с помощью этого метода довольно просто. Всё, что нужно, это описать правила анимации и перенести их в компонент TweenOne
.
Заключение
Анимации для разных целей требуют разных подходов. Мы рассмотрели несколько решений, которые вы можете использовать в своих проектах. Выберите метод, который подходит вам.
Ниже вы найдёте бонус со списком популярных библиотек для анимации.
Библиотеки ReactJs
- react-motion — фреймворк, который решает проблемы с анимацией.
- react-spring — основанная на физике библиотека анимации React.
- ant-motion — спецификация Animate и компоненты Ant Design.
- react-move — красивые анимации, управляемые данными для React.
- react-flight — лучший способ создания анимационных композиций для React.
- react-flip-move — простая анимация между изменениями DOM (например, упорядочивание списка) с использованием техники FLIP.
- react-burger-menu — компонент боковой панели с коллекцией эффектов и стилей, использующих переходы CSS и анимацию пути SVG.
- animated — Библиотека Декларативных Анимаций для React и React Native.
- react-tween-state — анимация React.
- react-animations — коллекция анимаций для inline-style библиотек.
Библиотеки Javascript
- GSAP — ультра высокопроизводительная профессиональная анимация для современного Интернета.
- Anime.js — Anime.js (/ˈæn.ə.meɪ/) – это лёгкая библиотека анимации JavaScript с простым, но мощным API. Работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.
- Popmotion — простые библиотеки анимации для восхитительных пользовательских интерфейсов.
- vivus — библиотека JavaScript для рисования анимации в SVG.
- svg.js — лёгкая библиотека для управления и анимации SVG.
- velocity — это анимационный движок с тем же API, что и у jQuery
$.animate()
. - wow — показывает анимации при прокрутке. Дружит с animate.css.
- dynamic.js — библиотека JavaScript для создания анимации на основе физики.
- granim.js — создавайте плавные и интерактивные градиентные анимации с помощью этой небольшой библиотеки Javascript.
- kute.js — это встроенный движок JavaScript-анимации с отличным качеством кода и хорошей производительностью.
- TweenJs — простая, но мощная библиотека межкадрового заполнения / анимации для Javascript. Часть набора библиотек CreateJS.
- moveTo — лёгкая JavaScript библиотека анимации прокрутки без зависимостей.
Используйте анимацию с умом!
Спасибо за внимание! Занимайтесь тем, что вам нравится, продолжайте учиться и не прекращайте кодить.
А если вам понравилась статья, подписывайтесь на автора на Medium и LinkedIn.
96К открытий102К показов