使用anime.js对SVG渐变停止色进行动画处理

编程问答 2022-08-12

问题描述

我正在尝试设置SVG径向渐变的动画，更改<stop>元素上'color-stop'属性的颜色值。我在<animate>内使用<stop>取得了成功，并且我的代码笔here正常工作。这是我的代码：

//CSS
#tile-grid {
  width: 300px;
  height: 300px;
}
//HTML
<div>
  <svg id="tile-grid" class="svg-shape-01">
    <defs>
      <radialGradient id="radial-grad-01" cx="50%" cy="70%" r="60%" fx="50%" fy="90%">
        <stop class="grad-stop-01" offset="10%" stop-color="hsla(0,70%,50%,1)" stop-opacity="1">
          <animate attributeName="stop-color" values="hsla(0,1); hsla(80,1)" dur="3s" repeatCount="indefinite"  />
        </stop>
        <stop class="grad-stop-02" offset="100%" stop-color="hsla(30,1)" stop-opacity="1">
          <animate attributeName="stop-color" values="hsla(30,1); hsla(240,1)" dur="3s" repeatCount="indefinite"  />
        </stop>
      </radialGradient>
    </defs>
    <rect id="r1" width="200" height="200" fill="url(#radial-grad-01)" />
  </svg>
</div>

因此<rect>充满了#radial-grad-01渐变，并且该渐变是动态的。

但是，我真的很想使用anime.js做同样的事情。我一直在使用anime.js来对svg多边形进行某种程度的随机化处理，我想为动画添加随机的hsla颜色。我有一个返回随机hsla颜色的函数，但是我不能让它与anime.js一起使用。但是，问题在于将动画的“ stop-color”属性作为目标。这就是我所拥有的：

//randHSLAColor() returns a string like 'hsla(50,60%,80%,0.4)'
function animGradient() {
        let rc1 = randHSLAColor();
        let rc2 = randHSLAColor();
        let gra1 = anime({
            targets: 'grad-stop-01',stopColor: rc1,easing: 'linear',duration: 1000
        });
        let gra2 = anime({
            targets: 'grad-stop-02',stopColor: rc2,duration: 1000
        });
    }

如果我尝试在animGradient（）上使用“ stop-color”而不是“ stopColor”，则会出现以下错误：

Uncaught SyntaxError: Unexpected token '-'

我还尝试用诸如'hsla（80,70％，50％，1）'这样的硬编码值替换rc1和rc2。

对此有何想法？我不确定animejs是否可以做我想做的事情，也许'stop-color'无法设置动画，或者我只是没有正确编写函数。

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationanime.jscolorsgradientsvg