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

Последнее обновление 05.01.2023 — Василий Иванов

Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.

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

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

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

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

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

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

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

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

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

import React, { Component } from 'react';
 
class FadeInOut extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      isVisible: false
    };
  }
 
  render() {
    const styles = {
      opacity: this.state.isVisible ? 1 : 0,
      transition: 'opacity 2s'
    };
 
    return (
      <div>
        <div style={styles}>
          Hello, world!
        </div>
        <button onClick={this.toggleVisibility}>
          Toggle
        </button>
      </div>
    );
  }
 
  toggleVisibility = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  }
}
 
export default FadeInOut;

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

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

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

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

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

npm install react-animations --save

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

npm install aphrodite --save

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

import { fadeIn, fadeOut } from 'react-animations';

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

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';
import { fadeIn, fadeOut } from 'react-animations';
 
const styles = StyleSheet.create({
  fadeIn: {
    animationName: fadeIn,
    animationDuration: '2s'
  },
  fadeOut: {
    animationName: fadeOut,
    animationDuration: '2s'
  }
});
 
class FadeInOut extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      isVisible: false
    };
  }
 
  render() {
    const className = this.state.isVisible ? css(styles.fadeIn) : css(styles.fadeOut);
 
    return (
      <div>
        <div className={className}>
          Hello, world!
        </div>
        <button onClick={this.toggleVisibility}>
          Toggle
        </button>
      </div>
    );
  }
 
  toggleVisibility = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  }
}
 
export default FadeInOut;

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

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

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

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

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

npm install react-simple-animate --save

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

import React, { Component } from 'react';
import { Animate, AnimateKeyframes} from "react-simple-animate";
 
class App extends Component {
  render() {
    return (
      <div>
        <Animate
          play
          start={{
            opacity: 0
          }}
          end={{
            opacity: 1
          }}
        >
          <div>
            Hello, world!
          </div>
        </Animate>
        <AnimateKeyframes
          play
          duration={2}
          keyframes={[
            { opacity: 0, transform: 'translateX(-100px)' },
            { opacity: 1, transform: 'translateX(0px)' }
          ]}
        >
          <div>
            Hello, world!
          </div>
        </AnimateKeyframes>
      </div>
    );
  }
}
 
export default App;

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

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

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

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

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

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