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

Меню
Posting....