Popmotion Pose описывается как декларативная система движения для HTML, SVG, React & React Native, она основана на работе автора Мэтта Перри над Popmotion, чтобы показать простой способ объявления анимации. В этой статье мы рассмотрим, как его можно использовать с React с помощью реакции-позы, чтобы без труда создавать с помощью React анимации, которые выглядят великолепно.

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

Эта статья предполагает базовые знания об использовании командной строки и создании приложений React.

Начать

Если вы хотите следовать инструкциям, убедитесь, что у вас установлены NodeJS и NPM 5.2+, команда npx, которую мы собираемся использовать, поставляется с NPM версии 5.2+.

Мы собираемся использовать создать приложение для реагирования, чтобы быстро приступить к работе со всей конфигурацией сборки, обработанной для нас, открыть терминал и cd в папку, в которой вы хотите создать свое приложение, а затем запустить:

npx create-react-app react-animations
cd react-animations
npm start

Ваш браузер по умолчанию должен автоматически открывать http: // localhost: 3000 / там, где теперь будет работать наше приложение.

Базовая анимация

Нам нужно будет начать с установки реакции-позы, которая распространяется как модуль NPM. Я также собираюсь установить стилизованные компоненты, чтобы добавить пользовательские стили к анимированным элементам. Вам не нужно использовать стилизованные компоненты для CSS, но он отлично работает с React Pose, поскольку их API похож. Вернитесь в терминал и запустите:

npm install react-pose styled-components --save

Откройте папку проекта response-animations в вашем любимом текстовом редакторе и создайте новый файл в каталоге / src с именем Box.js, здесь мы создадим наш первый анимированный элемент. Нам нужно будет начать с импорта компонентов позы и стиля реакции в верхней части файла следующим образом:

import posed from "react-pose";
import styled from "styled-components";

Теперь заданные и стилизованные переменные находятся в области видимости, давайте создадим компонент Box, чтобы упростить его начало ...

const Box = styled(posed.div({
  top: {y: 50},
  bottom: {y: 300}
}))`
  background-color: #f9415d;
  position: absolute;

  ${props => `
    height: ${props.size}px;
    width: ${props.size}px;
    left: calc(50% - ${props.size / 2}px);
  `}
`;

export default Box;

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

styled(posed.div({
  top: {y: 50},
  bottom: {y: 300}
}))`

Здесь мы определяем новый заданный компонент, который будет стилизован. posed.div() создает новый компонент React, который является div, а затем мы оборачиваем div в функцию styled(), которая может принимать любой компонент React в качестве аргумента.

Аргумент options, переданный в posed.div({options}), определяет анимацию с «верхним» и «нижним» состояниями. По значениям свойств «top» и «bottom» можно предположить, что прямоугольник будет перемещаться по оси y от 50 до 300.

Имена свойств «top» и «bottom» не важны, для них может быть установлено любое значение, это просто имя для ссылки на состояние анимации.

}))`
  background-color: #f9415d;
  position: absolute;

  ${props => `
    height: ${props.size}px;
    width: ${props.size}px;
    left: calc(50% - ${props.size / 2}px);
  `}
`;

Это наши стили CSS для бокса, стилизованные компоненты позволяют передавать реквизиты и использовать их в CSS, мы используем опоры одного размера в наших стилях, чтобы определить, насколько большим будет бокс. Это строка CSS, написанная на JavaScript. Если она все еще выглядит странно, вам может потребоваться поискать литералы шаблонов и стрелочные функции JS, поскольку они все еще являются достаточно новыми языковыми функциями.

Теперь нам просто нужно изменить файл /src/App.js, чтобы включить наш компонент Box, определяющий размер и реквизиты позы, реквизит позы должен быть равен одному из имен свойств, определенных в нашей конфигурации анимации, в данном случае «сверху». или «низ»:

import React, { Component } from 'react';
import Box from './Box';

class App extends Component {
  render() {
    return <Box size={100} pose="top"/>;
  }
}

export default App;

Откройте http: // localhost: 3000, чтобы увидеть результат…

Я использую хром-расширение React Developer tools, чтобы поменять местами опоры позы элементов между верхним и нижним состоянием анимации.

Это то, что подразумевается под названием этой статьи: анимация не требует усилий, потому что нам не нужно определять, настраивать или точно настраивать какую-либо анимацию. Все, что мы определили, - это начальная и конечная позиции для поля, а Popmotion Pose обработала анимацию между двумя точками за нас. Как утверждают документы, Popmotion будет…

Автоматически выбирать анимацию Popmotion на основе анимируемого свойства:
- для перемещения и поворота реквизита используется слегка упругая пружина.
- для масштабирования реквизита используется тугая пружина.
- Все другие реквизиты используют анимацию.

Добавление интерактивности

Ось Y - это не единственное, что мы можем анимировать. Попробуйте добавить больше атрибутов стиля для автоматической анимации между ними. Вот пример с большим количеством атрибутов стиля:

const Box = styled(posed.div({
  top: {y: 50, scale: 1, backgroundColor: '#f9415d', opacity: 1},
  bottom: {y: 300, scale: 1.5, backgroundColor: '#fcab10', opacity: 0.5}
}))`

Пока мы занимаемся этим, давайте также изменим опору позы, чтобы она была основана на событии ввода мыши в /src/App.js. Это важный шаг, так как реальные пользователи не собираются менять реквизиты с помощью инструментов разработчика React!

import React, { Component } from 'react';
import Box from './Box';

class App extends Component {
  state = {pose: 'top'}

  handleMouseEnter = () => this.setState({
    pose: this.state.pose === 'top' ? 'bottom' : 'top'
  })

  render() {
    return <Box
      size={100}
      pose={this.state.pose}
      onMouseEnter={this.handleMouseEnter}
    />;
  }
}

export default App;

Все, что мы здесь делаем, - это переключение между двумя состояниями анимации «верх» и «низ» в событии ввода мыши вместо статической передачи в опору позы, которая теперь основана на this.state.pose.

Вот результат ...

Создать что-то великое

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

См. Полный код этого примера в этом репо.

Но, конечно же, мы лишь поверхностно касаемся анимации, определяемой с помощью позы Popmotion, не обязательно индивидуальной или даже необходимости использовать анимацию по умолчанию, можно:

Для получения дополнительных идей ознакомьтесь с некоторыми анимациями на домашней странице моего веб-сайта https://danwebb.co/, см. Этот пост Жоао Мигеля Куньи, в котором рассматриваются некоторые более сложные индивидуальные примеры, или взгляните на некоторые из них. на сайте Popmotion Pose.

Заключение

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

Этот пост также доступен на danwebb.co, хотите принять участие в разработке React или создании веб-сайта / приложения? Свяжитесь с нами [email protected].

Для получения обновлений о других подобных статьях и других вещах я делаю подписывайтесь на меня в твиттере или подпишитесь на мою рассылку.