Как включить анимацию пути SVG в приложение React - PullRequest
Новая
       34

Как включить анимацию пути SVG в приложение React

1 голос
/ 02 июля 2019

Мне не удается оживить плавный переход между двумя похожими <path /> х

Есть такой фоновый эффект, которым я пытаюсь управлять в своем приложении React, где у вас есть плавающие капли, которые должны со временем деформироваться. Я создал две фигуры BLOB-объектов и попытался анимировать их с помощью тега svg <animate />, но он только на мгновение переключается с одной фигуры на другую после установки свойства dur. Я пробовал несколько библиотек, таких как «Reaction-Spring» или Reaction-что-то-SVG (там их довольно много), но лучшее, что я получил, было иметь только морф анимацию пути без Свойства заливки или градиента.

Две фигуры для переключения между: 

<svg>
 <defs>
  <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#00f" offset="0"/>
   <stop stop-color="#00f3ff" offset="1"/>
  </radialGradient>
 </defs>
 <g transform="translate(-67.756 -51.842)">
  <path id="blob" transform="matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c1.008-6.2604 4.104-12.132 8.5366-16.666s10.166-7.7395 16.293-9.3701c12.256-3.2613 25.688-0.11296 36.296 6.8373 10.608 6.9503 18.58 17.4 24.228 28.755 5.6488 11.355 9.1245 23.653 12.182 35.961 3.0568 12.306 5.7394 24.802 6.0332 37.479 0.29383 12.677-1.9195 25.642-8.1354 36.694-3.1079 5.5261-7.1991 10.523-12.159 14.473-4.9595 3.9497-10.796 6.8358-17 8.1437s-12.77 1.0114-18.756-1.0776c-5.9861-2.089-11.361-5.9944-15.007-11.181-3.1833-4.5287-5.0021-9.9148-5.8599-15.383-0.85782-5.4687-0.79005-11.042-0.45735-16.567 0.6654-11.051 2.3656-22.3-0.18511-33.073-2.7384-11.566-10.084-21.385-16.303-31.514-3.1096-5.0645-5.9863-10.317-7.8786-15.95-1.8923-5.6336-2.7725-11.692-1.8278-17.56z" fill="url(#radialGradient827)" stroke-width="0"/>
 </g>
</svg>


<svg>
 <defs>
  <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#00f" offset="0"/>
   <stop stop-color="#00f3ff" offset="1"/>
  </radialGradient>
 </defs>
 <g transform="translate(-60.376 -63.391)">
  <path id="blob" transform="matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" fill="url(#radialGradient827)" stroke-width="0"/>
 </g>
</svg>

Вот песочница для игры: нажмите здесь

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

1 Ответ

0 голосов
/ 07 июля 2019

Вы можете заставить капли сохранять свою окончательную форму после анимации, указав свойство fill тега <animation>: 

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 141 231" xmlns="http://www.w3.org/2000/svg" >
  <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#00f" offset="0"/>
   <stop stop-color="#00f3ff" offset="1"/>
  </radialGradient>

  <path id="blob" transform="translate(-60.376 -63.391) matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" fill="url(#radialGradient827)" stroke-width="0">
    <animate 
    attributeName="path"
    to="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" 
    dur="1s"
    fill="freeze" />
  </path>
</svg>

ПРИМЕЧАНИЕ: Чтобы анимация работала, вам нужно убедиться, что и начальный, и конечный путь имеют одинаковое количество точек, как описано в здесь . Вот отличный инструмент, чтобы убедиться, что анимация возможна.

Что касается вашего градиента, браузер должен позаботиться об этом. Вы можете просто применить его так же, как и к любому другому файлу SVG.

Избегать использования JS-библиотек для работы с SVG-анимацией - это отличный шаг, который, как правило, раздутый и грязный. Придерживайтесь официальных спецификаций SVG всякий раз, когда это возможно.

...