С помощью библиотеки 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.