Введение

Анимации - важная часть веб-сайта, и при правильной реализации они обеспечивают хорошее взаимодействие с пользователем. Хотя есть некоторые библиотеки анимации, которые работают с React, мы собираемся взглянуть на react-spring - отличную библиотеку анимации, которая основана на физике (да, вы правильно прочитали), а не на продолжительности.

Потребность в этом посте возникла, когда я попытался анимировать svg с помощью react-spring, но не смог найти хороший ресурс от начала до конца. Хотя react-spring документирует анимацию svg, реализация ее как есть не будет работать, поскольку ряд требуемых параметров, таких как длина пути svg, массив штрихов и т. Д., Не упомянут.

Итак, приступим!

Настройка

  1. Начните с ввода
npx create-react-app react-spring-demo

в вашем терминале. Зайдите в созданный проект и установите react-spring, набрав npm install --save react-spring

  1. Тип
npm run start

в терминале, чтобы запустить приложение React.

Перейдите к http://localhost:3000, чтобы просмотреть запущенное приложение.

Перейдите в каталог src и создайте новый файл Animation.js, который будет содержать код анимации.

  1. Удалите все из App.js и импортируйте Animation.js. Внутри Animation.js введите простую программу hello world в качестве заполнителя.

Ниже App.js

// App.js
import React from 'react';
import Animation from './Animation';

const App = () => {
  return (
    <div>
      <Animation />
    </div>
  );
};

export default App;

Ниже Animation.js

//Animation.js
import React from 'react';

const Animation = () => {
  return <h1>Hello World!</h1>;
};

export default Animation;

Анимация

Замените код в Animation.js следующим кодом

// Animation.js
import React, { useEffect, useRef } from 'react';

const Animation = () => {
  const pathRef = useRef();

  useEffect(() => {
    console.log(pathRef.current.getTotalLength());
  }, []);

  return (
    <div>
      <svg>
        <circle
          strokeWidth="3"
          cx="100"
          cy="50"
          r="40"
          stroke="black"
          fill="none"
          ref={pathRef}
        />
      </svg>
    </div>
  );
};

export default Animation;

Чтобы анимировать SVG, вам нужна длина его пути. Css-tricks объясняет, как этого добиться с помощью HTML, CSS и ванильного JavaScript, который я перевел на React.

Чтобы получить длину пути, вам понадобится ссылка на путь, который достигается с помощью useRef хука, который используется для ссылки на элемент DOM или React. getTotalLength() дает нам общую длину.

useEffect хук используется для получения длины пути svg, как только компонент монтируется.

Вы можете либо записать длину в консоли браузера, а затем использовать ее в useState , либо вы можете временно отобразить невидимый SVG и отобразить окончательный SVG при установке значения offset. Я собираюсь следовать второму методу, так как мне не придется постоянно проверять console.log() всякий раз, когда я изменяю svg.

Уже переместите фигуру!

Ага-ага. А теперь самое интересное - анимировать круг.

Скопируйте следующий код в Animation.js

// Animation.js
import React, { useEffect, useState, useRef } from 'react';
import { Spring } from 'react-spring/renderprops';

const Animation = () => {
  const pathRef = useRef();
  const [offset, setOffset] = useState(null);

  useEffect(() => {
    setOffset(pathRef.current.getTotalLength());
  }, [offset]);

  return (
    <div>
      {offset ? (
        <Spring from={{ x: offset }} to={{ x: 0 }}>
          {(props) => (
            <svg>
              <circle
                strokeDashoffset={props.x}
                strokeDasharray={offset}
                strokeWidth="3"
                cx="100"
                cy="50"
                r="40"
                stroke="black"
                fill="none"
                ref={pathRef}
              />
            </svg>
          )}
        </Spring>
      ) : (
        <svg>
          <circle
            strokeWidth="3"
            cx="100"
            cy="50"
            r="40"
            stroke="none"
            fill="none"
            ref={pathRef}
          />
        </svg>
      )}
    </div>
  );
};

export default Animation;

Чтобы создать завершающуюся анимацию круга от длины 0 до полной длины, нам нужна его длина, которая хранится в смещении.

Первоначально, когда компонент загружен, значение offset равно нулю. Чтобы получить длину, нам понадобится файл svg. Поскольку нам не нужно его отображать, для stroke установлено значение none. Как только значение offset установлено, мы отображаем svg и анимируем его.

Spring renderprop используется для перемещения данных из одного состояния в другое. strokeDasharray определяет длину тире для отображения в нашем svg. Поскольку нам нужен полный круг, его значение должно быть длиной круга, то есть offset.

strokeDashoffset устанавливает значение смещения, которое перемещает положение тире. Теперь мы анимируем его от значения offset до 0, чтобы он выглядел так, как будто нарисован круг.

Вы также можете настроить различные параметры, такие как friction, tension, precision и т. Д. Полный список можно найти здесь

Это модифицированный код, который показывает, что происходит при изменении некоторых значений.

// Animation.js
import React, { useEffect, useState, useRef } from 'react';
import { Spring } from 'react-spring/renderprops';

const Animation = () => {
  const pathRef = useRef();
  const [offset, setOffset] = useState(null);

  useEffect(() => {
    setOffset(pathRef.current.getTotalLength());
  }, [offset]);

  return (
    <div>
      {offset ? (
        <Spring
          from={{ x: offset }}
          to={{ x: 0 }}
          config={{ tension: 4, friction: 0.5, precision: 0.1 }}
        >
          {(props) => (
            <svg>
              <circle
                strokeDashoffset={props.x}
                strokeDasharray={offset}
                strokeWidth="3"
                cx="100"
                cy="50"
                r="40"
                stroke="black"
                fill="none"
                ref={pathRef}
              />
            </svg>
          )}
        </Spring>
      ) : (
        <svg>
          <circle
            strokeWidth="3"
            cx="100"
            cy="50"
            r="40"
            stroke="none"
            fill="none"
            ref={pathRef}
          />
        </svg>
      )}
    </div>
  );
};

export default Animation;

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

Вы можете просмотреть весь проект на GitHub.

Первоначально опубликовано на https://flashblaze.xyz.