Добавить анимацию с помощью библиотеки реагирования и движения

С помощью библиотеки response-motion мы можем легко визуализировать анимацию в нашем приложении React.

В этой статье мы рассмотрим, как начать работу с реактивным движением.

Начиная

Мы можем установить пакет, запустив:

npm install --save react-motion

Движение

Компонент Motion позволяет нам создавать анимацию с помощью функции замедления по нашему выбору.

Например, мы можем написать:

import React, { useState } from "react";
import { Motion, spring } from "react-motion";
export default function App() {
  const [click, setClick] = useState(false);
  return (
    <>
      <button onClick={() => setClick(!click)}>toggle</button>
      <Motion defaultStyle={{ x: 0 }} style={{ x: spring(click ? 30 : 0) }}>
        {({ x }) => (
          <div
            style={{
              transform: `translateX(${x}px)`
            }}
          >
            hello world
          </div>
        )}
      </Motion>
    </>
  );
}

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

Компонент Motion обертывает элементы, которые мы хотим анимировать.

Опора defaultStyle имеет стили по умолчанию.

И свойство style компонента Motion имеет стиль, который применяется при анимации.

Затем мы можем получить значение x в опоре рендеринга и затем использовать его в нашем контенте.

Функция spring отображает значение x, которое применяется при запуске анимации.

Мы можем анимировать более одного стиля.

Например, мы можем написать:

import React, { useState } from "react";
import { Motion, spring } from "react-motion";
export default function App() {
  return (
    <>
      <Motion
        defaultStyle={{ x: 0, y: 0 }}
        style={{ x: spring(10), y: spring(20) }}
      >
        {({ x, y }) => (
          <div
            style={{
              transform: `translateX(${x}px) translateY(${y}px)`
            }}
          >
            hello world
          </div>
        )}
      </Motion>
    </>
  );
}

для анимации значений x и y и использования их с div.

В шахматном порядке

Компонент StaggeredMotion анимирует коллекцию фиксированной длины, значения которой зависят друг от друга.

Чтобы использовать это, мы можем написать:

import React from "react";
import { spring, StaggeredMotion } from "react-motion";
export default function App() {
  return (
    <>
      <StaggeredMotion
        defaultStyles={[{ h: 0 }, { h: 0 }, { h: 0 }]}
        styles={(prevInterpolatedStyles) =>
          prevInterpolatedStyles.map((_, i) => {
            return i === 0
              ? { h: spring(100) }
              : { h: spring(prevInterpolatedStyles[i - 1].h) };
          })
        }
      >
        {(interpolatingStyles) => (
          <div>
            {interpolatingStyles.map((style, i) => (
              <div key={i} style={{ border: "1px solid", height: style.h }} />
            ))}
          </div>
        )}
      </StaggeredMotion>
    </>
  );
}

чтобы создать 3 блока, которые накладываются друг на друга.

Высота каждого из них анимирована, так что их высота увеличивается до 100 пикселей каждый.

Мы передаем массив в опору defaultStyles, чтобы установить начальные стили для каждого div,

Затем в опоре styles мы создаем функцию для получения ранее интерполированных стилей из параметра.

Затем мы возвращаем объект со стилем высоты для анимации в зависимости от индекса анимированного элемента.

В опоре рендеринга мы получаем interpolatingStyles и применяем их к div.

Заключение

Мы можем создавать простые анимации с помощью библиотеки react-motion.