如何使用动画，定位和循环来创建雨滴效果

问题描述

我想通过给笔画添加动画效果，更改其位置并使其循环来渲染雨滴效果，但是在 after（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);
}

});

解决方法

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

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

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