Создайте числовую анимацию с помощью React Spring

Введение в использование крючка useSpring от react-spring

В этой статье мы рассмотрим, как создать эту анимацию с помощью библиотеки react-spring. Это сделать намного проще, чем вы думаете.

«React-spring» - это библиотека анимации на основе физики пружины, которая должна покрыть большую часть ваших анимационных потребностей, связанных с пользовательским интерфейсом. Он дает вам достаточно гибкие инструменты, чтобы с уверенностью воплощать ваши идеи в подвижные интерфейсы ».

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

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

Начиная

Начнем с создания нового приложения с использованием create-react-app. Оттуда мы очистим неиспользуемые файлы, и наша файловая структура будет выглядеть, как показано ниже.

Сначала мы создадим базовый дизайн с жестко закодированными данными. В файле App.js создайте div, который будет нашим компонентом карты. В этом div у нас будет еще div для номера и тег button.

const App = () => {
  return (
    <div className="App">
      <div className="card">
        <div className="number">1000000</div>
        <button>Random Number</button>
      </div>
    </div>
  );
};

В файл index.css давайте добавим стили, как показано ниже, чтобы наше приложение выглядело немного лучше.

Наше приложение теперь должно выглядеть так, как показано ниже.

Создание числовой анимации

Далее мы создадим числовую анимацию с помощью react-spring. Сначала установите библиотеку в свой проект.

npm install react-spring

Мы будем использовать ловушку useSpring и значение animated из библиотеки. Давайте импортируем их в файл App.js.

import { useSpring, animated } from 'react-spring';

Хук useSpring - это единственная пружина, которая перемещает данные из одного состояния в другое. В компоненте App мы определим весеннюю анимацию, которую хотим сделать. Он возьмет число, начиная с 0, и анимирует его до 1000000.

const props = useSpring({ val: 100000, from: { val: 0 } });

Затем нам нужно будет обновить элемент в нашем операторе возврата, чтобы использовать эту анимацию. Чтобы использовать react-spring, нам нужно добавить animated к div, который мы хотим анимировать. Затем мы добавим анимацию как значение вместо жестко запрограммированного числа.

<animated.div className="number">
  {props.val}
</animated.div>

Это создаст нашу анимацию, как показано ниже. Но что-то не так. Как видите, в то время как число растет, в нем очень много десятичных знаков.

Чтобы исправить это, мы воспользуемся функцией интерполяции и вызовем Math.floor для значения. Это позволит нам удалить десятичные дроби.

<animated.div className="number">
  {props.val.interpolate(val => Math.floor(val))}
</animated.div>

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

Генерация случайного числа

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

Мы будем использовать ловушку useState из response для создания числового состояния. Это будет обновляться со случайно сгенерированным числом при нажатии кнопки.

По-прежнему внутри файла App.js импортируйте useState из response.

import { useState } from 'react';

Затем создайте состояние, и мы установим начальное значение 1000000.

const [num, setNum] = useState(1000000);

Теперь мы можем обновить нашу useSpring функцию для анимации до значения num, а не до статического числа.

const props = useSpring({ val: num, from: { val: 0 } });

Затем мы создадим переменную с именем randomNum, которая будет генерировать для нас случайное число от 0 до 1000000. Для этого мы будем использовать функции Math.floor и Math.random, как показано ниже.

const randomNum = Math.floor(Math.random() * 1000000);

Наконец, мы добавим к кнопке опору onClick, которая обновит состояние num при нажатии кнопки.

<button onClick={() => setNum(randomNum)}>Random Number</button>

Окончательный App.js файл будет выглядеть так.

Заключение

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

React-spring - хорошая библиотека для добавления анимации в ваши приложения для реагирования. Он прост в использовании, и с ним можно многое делать. Ознакомьтесь с их документацией ниже, чтобы узнать, что еще вы можете сделать.

Если вы хотите увидеть в действии еще одну библиотеку реактивной анимации, ознакомьтесь со статьей ниже, чтобы узнать о framer-motion.