如何将 svg 路径变形动画合并到 React 应用程序中

Posted 2023-03-16

【中文标题】如何将 svg 路径变形动画合并到 React 应用程序中

【英文标题】：How to incorporate svg path morph animation into a React app

【发布时间】：2019-11-13 11:49:22

【问题描述】：

我无法在两个相似的<path /> 之间制作平滑过渡的动画

我尝试在我的 React 应用程序中管理这种背景效果，其中有一些漂浮的斑点需要随着时间的推移而变形。我创建了两个 blob 形状并尝试通过 svg <animate /> 标签为它们设置动画，但它只是在设置 dur 属性后暂时从一种形状转换为另一种形状。 我已经尝试了一些库，例如“react-spring”或 react-something-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-/>
 </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-/>
 </g>
</svg>

这是一个可以玩的沙盒：click here

我想了解如何在两个 svg 路径之间以缓慢的过渡进行变形，并在不使用一些专门的反应动画库的情况下应用我的渐变并将其合并到我的 React 应用程序中。 我现在所能做的就是使用相当多的库在无样式形状之间变形，并暂时从一种形状转换为另一种形状

【参考方案1】：

您可以通过指定<animation> 标签的fill 属性使blob 在动画结束后保持其最终形状：

<?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->
    <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>

注意：要使动画正常工作，您需要确保初始路径和最终路径具有相同数量的点，详见here。 Here's 一个很好的工具来确保动画是可能的。

关于你的渐变，浏览器应该注意这一点。您可以像在任何其他 SVG 文件上一样简单地应用它。

避免使用 JS 库来处理 SVG 动画是一个很好的举措，它们往往会变得臃肿和凌乱。尽可能坚持使用官方 SVG 规范。