Оживите свое приложение React с помощью анимации

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

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

Зачем использовать анимацию в React?

Есть много причин, по которым вы можете захотеть использовать анимацию в своем приложении React. Некоторые из наиболее распространенных причин включают в себя:

• Взаимодействие кажется более естественным. Анимация может помочь сделать взаимодействие с пользователем более естественным и плавным. Например, если вы используете компонент-переключатель, вы можете захотеть анимировать кнопку-переключатель между состояниями «включено» и «выключено». Другой пример — индикаторы выполнения, вы можете создать анимированный индикатор выполнения для страниц вашего реагирующего приложения.
• Предоставление визуальной обратной связи
  instagram viewer
  . Анимации могут обеспечивать визуальную обратную связь с пользователем. Например, если пользователь нажимает кнопку, вы можете захотеть анимировать кнопку, чтобы указать, что приложение зарегистрировало это действие.
• Управление вниманием пользователя. Анимации могут направить внимание пользователя на определенный элемент. Например, если у вас есть модальное диалоговое окно, которое появляется на экране, вы можете использовать анимацию, чтобы привлечь к нему внимание пользователя.
• Создание чувства срочности.Анимация может создать ощущение срочности или важности. Например, если у вас есть компонент таймера, который ведет обратный отсчет, вы можете использовать анимацию, чтобы отразить срочность по мере приближения крайнего срока.

Есть несколько способов добавить анимацию в компоненты React. Три из них, о которых вы узнаете, — это встроенные анимации, библиотека react-animations и react-simple-animate.

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

Метод 1: использование анимации встроенного стиля

Например, допустим, вы хотите анимировать компонент, чтобы он исчезал при нажатии кнопки. Вы можете сделать это с помощью следующего кода:

Импортировать Реагировать, {Компонент} от 'реагировать';
сортFadeInOutрасширяетКомпонент{
конструктор(реквизит) {
супер(реквизит);
этот.состояние = {
 виден: ЛОЖЬ
 };
 }
оказывать() {
константа стили = {
непрозрачность: этот.состояние.isVisible? 1: 0,
 переход: 'непрозрачность 2 с'
 };
возвращаться (
<див>
<стиль div={стили}>
 Привет, мир!
</div>
<кнопка onClick={this.toggleVisibility}>
 Переключать
</button>
</div>
 );
 }
toggleVisibility = () => {
этот.setState (prevState => ({
виден: !предыдущее состояние.isVisible
 }));
 }
}
экспортпо умолчанию Исчезновение;

В этом примере объект стиля имеет свойства непрозрачности и перехода. Непрозрачность равна 0, когда компонент не виден, и 1, когда он виден. Свойство перехода — «opacity 2s», что приведет к переходу непрозрачности в течение двух секунд при ее изменении.

Кнопка переключает видимость компонента. Когда кто-то нажимает кнопку, переменная состояния isVisible обновляется, и компонент появляется или исчезает в зависимости от его текущего состояния.

Способ 2: использование библиотеки реактивных анимаций

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

Чтобы использовать реагирующую анимацию, вам сначала нужно установить библиотеку:

нпм установить реактивная анимация --сохранять

Вам также необходимо установить aphrodite, которая зависит от реактивных анимаций:

нпм установить Афродита --сохранять

После того, как вы установили библиотеки, вы можете импортировать анимации, которые хотите использовать:

Импортировать { постепенное появление, исчезновение } от «реагировать-анимации»;

Затем вы можете использовать анимацию в своих компонентах:

Импортировать Реагировать, {Компонент} от 'реагировать';
Импортировать {Таблица стилей, css} от 'Афродита';
Импортировать { постепенное появление, исчезновение } от «реагировать-анимации»;
константа стили = Таблица стилей.create({
 исчезновение: {
 анимацияНазвание: исчезать,
 анимацияПродолжительность: '2 с'
 },
 исчезать: {
 анимацияНазвание: исчезать,
 анимацияПродолжительность: '2 с'
 }
});
сортFadeInOutрасширяетКомпонент{
конструктор(реквизит) {
супер(реквизит);
этот.состояние = {
 виден: ЛОЖЬ
 };
 }
оказывать() {
константа имя_класса = этот.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);
возвращаться (
<див>
<div имя_класса={имя_класса}>
 Привет, мир!
</div>
<кнопка onClick={this.toggleVisibility}>
 Переключать
</button>
</div>
 );
 }
toggleVisibility = () => {
этот.setState (prevState => ({
виден: !предыдущее состояние.isVisible
 }));
 }
}
экспортпо умолчанию Исчезновение;

Этот пример начинается с импорта анимаций fadeIn и fadeOut из библиотеки реактивных анимаций. Затем он определяет объект стилей с анимациями fadeIn и fadeOut, а для параметра animationDuration установлено значение две секунды.

Кнопка переключает видимость компонента. Когда кто-то щелкнет по нему, переменная состояния isVisible обновится, и компонент будет исчезать или исчезать в зависимости от его текущего состояния.

Способ 3: использование библиотеки react-simple-animate

Библиотека react-simple-animate предоставляет простой способ добавления анимации в компоненты React. Он предлагает декларативный API, который упрощает определение сложных анимаций.

Чтобы использовать библиотеку, ее необходимо сначала установить:

нпм установить реагировать-просто-анимировать --сохранять

Затем вы можете использовать его в своих компонентах:

Импортировать Реагировать, {Компонент} от 'реагировать';
Импортировать { Анимация, анимация ключевых кадров} от "реагировать-просто-анимировать";
сортПриложениерасширяетКомпонент{
 оказывать() {
возвращаться (
<див>
<Анимировать
 играть
начинать={{
 непрозрачность: 0
 }}
конец={{
 непрозрачность: 1
 }}
>
<див>
 Привет, мир!
</div>
</Animate>
<АнимацияКлючевые кадры
 играть
 продолжительность = {2}
 ключевые кадры={[
 { непрозрачность: 0, преобразование: 'перевестиX(-100px)' },
 { непрозрачность: 1, преобразование: 'перевестиX(0px)' }
 ]}
>
<див>
 Привет, мир!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
экспортпо умолчанию Приложение;

Анимировать компонент исчезает в элементе div. Он начинается с непрозрачности 0 и заканчивается непрозрачностью 1. Свойство play имеет значение true, что заставит анимацию воспроизводиться автоматически при монтировании компонента.

АнимацияКлючевые кадры компонент анимирует элемент div в течение двух секунд. Массив ключевых кадров определяет начальное и конечное состояния анимации. Первый ключевой кадр имеет непрозрачность 0 и значение translateX -100px. Второй ключевой кадр имеет непрозрачность 1 и значение translateX 0px.

Увеличьте вовлеченность пользователей с помощью анимации

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

Например, вы можете использовать анимацию, чтобы вознаградить пользователя за выполнение задачи. Это может быть что-то простое, например, короткая анимация «спиннер» или более сложная анимация, которая воспроизводится, когда пользователь проходит уровень в игре.

Вы также можете бесплатно развернуть свое приложение React в Интернете с помощью таких сервисов, как страницы Github или Heroku.