Question

我正在尝试设置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,70%,50%,1); hsla(80,70%,50%,1)" dur="3s" repeatCount="indefinite"  />
        </stop>
        <stop class="grad-stop-02" offset="100%" stop-color="hsla(30,70%,50%,1)" stop-opacity="1">
          <animate attributeName="stop-color" values="hsla(30,70%,50%,1); hsla(240,70%,50%,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,
            easing: 'linear',
            duration: 1000
        });
    }

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

Uncaught SyntaxError: Unexpected token '-'

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

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

谢谢！

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

0 个答案: