Создание анимированных приложений 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» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню