如何解决使用anime.js对SVG渐变停止色进行动画处理
我正在尝试设置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 举报,一经查实,本站将立刻删除。