Svg.js 如何使用动画、定位和循环创建雨滴效果

我希望通过设置笔划动画、更改笔划位置并使其循环来渲染雨滴效果，但循环中不考虑（path.plot（））之后的

如何将位置集成到循环中

document.addEventListener('DOMContentLoaded', (event) => {

var draw = SVG().addTo('#svg').size('100%', '100%');
let lines = [];
let hw = draw.parent().node.clientWidth;
let hh = draw.parent().node.clientHeight;
function getX(){ return Math.floor(Math.random() * hw);}
function getY(){ return Math.floor(Math.random() * hh);}
function getL(x){ return x + Math.floor(hw/20);}
for (let i = 0; i < 10; i++){
  let x = getX();
  let y = getY();
  let length = x + Math.floor(hw/20);
  let path = draw.path("M"+x+" "+y+"L"+length+" "+y);
  path.attr({ 'stroke': 'black', 'stroke-dasharray': length, 'stroke-dashoffset': length});
  let dash = x+','+length;
  let run = path.animate({'duration': 5000, 'delay': i*500}).attr({ 'stroke-dashoffset': 0 }).after(
    function(){
      x = getX();
      y = getY();
      length = getL(x);
      path.plot("M"+x+" "+y+"L"+length+" "+y);
      path.attr({ 'stroke': 'black', 'stroke-dasharray': length+' '+length, 'stroke-dashoffset': length});
    }
  ).loop(5000, false, 500);
}

});

document.addEventListener（'DOMContentLoaded'，（事件）=>{
var draw=SVG（）；
让线=[]；
设hw=draw.parent（）.node.clientWidth；
设hh=draw.parent（）.node.clientHeight；
函数getX（）{返回Math.floor（Math.random（）*hw）；}
函数getY（）{返回Math.floor（Math.random（）*hh）；}
函数getL（x）{返回x+Math.floor（hw/20）；}
for（设i=0；i<10；i++）{
设x=getX（）；
设y=getY（）；
让长度=x+数学楼层（hw/20）；
设路径=绘制路径（“M”+x+“”+y+“L”+长度+“”+y）；
attr（{'stroke'：'black'，'stroke dasharray'：length，'stroke dashoffset'：length}）；
设短划线=x+'，'+长度；
让run=path.animate（{'duration'：5000，'delay'：i*500}）.attr（{'stroke dashoffset'：0}）。之后(
函数（）{
x=getX（）；
y=getY（）；
长度=getL（x）；
路径图（“M”+x+“”+y+“L”+长度+“”+y）；
attr（{'stroke'：'black'，'stroke dasharray'：length+''+'length'，stroke dashoffset'：length}）；
}
).loop（5000，false，500）；
}
});

定义动画后，其值为绝对值。即使更改了虚线偏移，它也将根据动画中定义的内容重置。如果你想要一个新的起点，你需要一个新的动画。情节应该是可行的，因为你们并没有一个动画伊托克，谢谢你们的回复，我需要找出一些其他的东西。是的，绘图功能可以工作，如果我在后面设置其他动画，它会改变它的位置。也许这是一个bug。考虑打开一个问题以确认。考虑到

path.animate（）.plot（）.animate（）

，路径不应更改其在第二个动画上的位置？如果第二个动画位于第一个动画之后（且第一个动画未循环=两个动画不会同时更改相同的属性），则应该可以工作