Question

我正在尝试使用SnapSVG在SVG中创建动画，但我仍然坚持一件事。

我已经在这个小提琴上看到了一个特效：http://jsfiddle.net/km00bu0o/

现在我试图在两个粒子之间划一条线。当两个粒子之间的间隙小于100像素时，必须出现此行。

我已尝试过这个但是还有一个导航错误..

      for(i = 0; i < numberParticules; i++){
          for(j = 0; j < numberParticules; j++){

              var iParticule = stockParticules[i];
              var jParticule = stockParticules[j];

              var posXI = parseFloat(iParticule.attr('cx'));
              var posYI = parseFloat(iParticule.attr('cy'));
              var posXJ = parseFloat(jParticule.attr('cx'));
              var posYJ = parseFloat(jParticule.attr('cy'));

              proximity = 100;

              if(
                    (posXI - posXJ) < proximity &&
                    (posYI - posYJ) < proximity &&
                    (posXJ - posXI) > - proximity &&
                    (posYJ - posYI) > - proximity
              ) {
                      var line = s.line(posXI, posYI, posXJ, posYJ).attr({stroke: '#a6a8ab', strokeWidth: '1px'});
              }

              else if(
                    (posXI - posXJ) < proximity &&
                    (posYI - posYJ) < proximity &&
                    (posXJ - posXI) > - proximity &&
                    (posYJ - posYI) > - proximity
              )
              {
                    var lines = s.selectAll('line');
                    lines.remove();
              }

          }
      }

这部分代码插入animationParticules函数..

总结一下，绘制线条但是＆＃34; 100像素＆＃34;不考虑接近度，线条不会在100像素以上消失。

你有解决方案吗？

圆圈之间的SVG线（动画）

0 个答案: