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

Программный код | Просмотр | Проект

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

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

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


Создание анимированных приложений React при помощи 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.jsximport 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 :

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

Но анимация происходит так быстро, что мы пропускаем большую ее часть. Для замедления анимации используем свойство 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.0yarn remove react && yarn add react@16.7.0-alpha.0

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

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

//Hooks.jsximport 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` вы должны увидеть на экране примерно следующее:

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

Заключение

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *