使用带有 gsap 和 svg.js 的 getter 和 setter 对来自对象的值进行动画处理

问题描述

我正在尝试使用 GSAP 为 svg.js 类中的渐变停止设置动画。为此，我尝试对传递给 svg 渐变函数的对象内的值进行动画处理。代码如下。目前没有分配发生，我希望渐变从左到右动画。 Here is the codepen

var gradientStops = {
  _start: 0,get start() {
    return this._start;
  },set start(value) {
    this._start = value;
  },_end: 1,get end() {
    return this._end;
  },set end(value) {
    this._end = value;
  }
};

var draw = new SVG().addTo("#svg").attr({
  viewBox: "0 0 100 100",class: "w-2/3 bg-red-50"
});
var gradient = draw.gradient("linear",function (add) {
  add.stop(gradientStops.start,"hsla(352,99%,90%,1.00)");
  add.stop(gradientStops.end,50%,1.00)");
});

var globe = draw.circle(50).fill(gradient).cx(50).cy(50);

gsap.to(gradientStops,{
  start: 1,end: 0,duration: 2,yoyo: true,repeat: -1
});
Th

提前感谢您的帮助

解决方法

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

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

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

gsap svg.js