Создание анимированных приложений React с помощью React Spring

Код | Демо | Проект

В этом руководстве мы рассмотрим, как создавать красивые анимации в React приложениях, используя библиотеку react-spring.

React Spring считается одним из лучших анимационных пакетов для React — приложений. Мы сосредоточимся на Spring, который является одним из наиболее компонентов react-spring.

С помощью Spring можно:

  • Управлять значениями любого типа;
  • Манипулировать атрибутами HTML
  • Манипулировать путями SVG.
  • Настраивать CSS.
Содержание

Что будем создавать

Мы создадим простую анимацию скольжения и затухания, чтобы понять, насколько легко работать со Spring.

Посмотреть демо

Настройка

Мы настроим среду React с помощью Create React App. Чтобы установить инструмент, запустите:

npm install -g create-react-app

Теперь вы можете использовать его для создания приложения. Запустите:

create-react-app react-spring-demo

После этого будет создана папка react-spring-demo, содержащая проект. Перейдите в нее, установите основную зависимость и пакет react-spring:

yarn add react-spring

Мы используем yarn, так как он является менеджером пакетов по умолчанию в create-react-app. Убедитесь, что у вас установлен yarn, запустив:

npm install -g yarn

Анимация стилей

Используем компонент Spring для анимирования перехода на вновь загруженную страницу. Для этого мы обернем App.js в компонент Spring.

Компонент Spring принимает свойства from и to, которые предоставляют значения для интерполяции анимации.

Мы хотим создать эффект «выпадения» страницы сверху, а также ее постепенного исчезновения. Для этого установим для начального верхнего поля элементов страницы отрицательное значение и приведем его к 0 во время анимации. Чтобы создать эффект затухания, мы установим начальное значение непрозрачности 0 и приведем его к 1 к концу анимации.

Шаблон, созданный с помощью, create-react-app имеет идеальный фон для демонстрации анимации:

App.js

//
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Spring  } from 'react-spring';

class App extends Component {
  render() {
    return (

        <Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}>
          { props => (
            <div  className="App" style={ props }>
              <div >
                <header className="App-header" >
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>
                      Edit <code>src/App.js</code> and save to reload.
                    </p>
                      <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                      Learn React
                    </a>
                  </header>
                </div>
              </div>
            )
          }
        </Spring>
    );
  }
}

export default App;

Запустите приложение, выполнив приведенную ниже команду.

yarn start

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

Анимация содержимого элементов

Создадим с помощью Spring счетчик, который начинается с 0 и заканчивается на 10.  Свойство from будет содержать начальное значение, а to — конечное значение счетчика.

В каталоге src создайте папку components и файл с именем Counter.jsx. Добавьте в файл Countrt.jsx следующий код:

//src/Counter.jsx
import React from 'react';
import { Spring } from'react-spring';

const counter = () => (
    <Spring
        from={{ number: 0 }}
        to={{ number: 10 }}
       {props => <div>{props.number.toFixed()}</div>}
    </Spring>
)

export default counter;

Теперь импортируйте счетчик в App.js и разместите его под элементом заголовка, чтобы отобразить его в приложении.

//App.js
...
import Counter from './components/Counter';

class App extends Component {
  render() {
    return (

        <Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}>
          { props => (
            <div  className="App" style={ props }>
              <div >
                <header className="App-header" >
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>
                      Edit <code>src/App.js</code> and save to reload.
                    </p>
                      <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                      Learn React
                    </a>
                    <Counter />
                  </header>
                </div>
              </div>
            )
          }
        </Spring>
    );
  }
}

export default App;

Открыв браузер, вы увидите счетчик прямо под текстом Learn React:

Но анимация происходит так быстро, что мы пропускаем большую ее часть. Для замедления анимации используем свойство delay, задав ему значение в миллисекундах. После добавления задержки продолжительностью в 1 секунду функция счетчика выглядит следующим образом:

const counter = () => (
    <Spring
        from={{ number: 0 }}
        to={{ number: 10 }}
        delay= '1000'>
        {props => <div>{props.number.toFixed()}</div>}
    </Spring>
)

Теперь счетчик запускается после завершения анимации страницы.

Конфигурация Spring

Компонент Spring использует эффекты на основе физики. Поэтому нужно настроить поведение Spring с помощью свойства config: натяжение, трение, задержки.

Для этого в react-spring есть несколько встроенных пресетов, которые можно использовать для настройки Spring. Импортируйте config из пакета react-spring и передайте его в конфигурационный файл Spring. Пример:

import React from 'react';
import { Spring, config } from'react-spring';

const counter = () => (
    <Spring
        from={{ number: 0 }}
        to={{ number: 10 }}
        delay= '1000'
        config = { config.molasses }>
        {props => <div>{props.number.toFixed()}</div>}
    </Spring>
)

export default counter;

В приведенном выше примере мы использовали пресет molasses, который предназначен для воссоздания эффекта натяжения и трения. Предварительные настройки определяют свойства Spring tension и friction. Эти пресеты включают в себя эффекты перетекания, натяжения, замедления и расшатывания.

Использование с хуками

Команда проекта недавно представила React Hooks.  Для использования хуков вам необходимо обновить до версии React 16.7 alpha react и react-dom. Для этого выполните следующие команды:

yarn remove react-dom && yarn add react-dom@16.7.0-alpha.0

yarn remove react && yarn add react@16.7.0-alpha.0

Мы можем использовать хук из react-spring с именем useSpring. Он позволяет определять и обновлять данные. Данный хук принимает те же значения, которые передаются с помощью свойств. После useSpring превращает их в анимацию.

Чтобы продемонстрировать это, рассмотрим, как отобразить другой текст после выполнения предыдущих анимаций. Для этого создадим новый файл компонента Hooks.jsx и добавим в него следующий код:

//Hooks.jsx
import React from 'react';
import { useSpring, animated } from 'react-spring';

const HookedComponent = () => {
    const [props] = useSpring({
        opacity: 1,
        color: 'white',
        from: { opacity: 0 },
        delay: '2000'
    })
    return <animated.div style={props}>This text Faded in Using hooks</animated.div>
}

export default HookedComponent;

Мы передаем настройки Spring в useSpring как объект arguments. Затем хук передает эти значения элементу animated, который создает анимацию.

Теперь импортируем это в App.js и используем в приложении HookedComponent. После очистки исходного кода из `create-react-app` вы должны увидеть на экране примерно следующее:

Заключение

Spring является самым простым в использовании компонентом react-spring. Но он предоставляет эффективные средства для создания анимации в React.

Посмотреть демо

Также вы можете использовать другие компоненты react-spring. Например, Transition, который задает анимацию жизненных циклов компонентов. В целом, react-spring — это отличный пакет с множеством параметров.

Данная публикация представляет собой перевод статьи «Create Animated React Apps With React Spring» , подготовленной дружной командой проекта Интернет-технологии.ру