当圆圈移动时我需要重新绘制连接线 SNAP SVG

Question

圆圈有无限的动画。我需要所有的时间来重新画线。

js:

 var paperHeader = Snap(".circle_anim");
    var lineHeader = paperHeader.path("").attr({fill: "transparent", stroke: "#9b9b9c", strokeWidth: 2});

    function flyCircle(name_circle){
        var element = Snap("#"+name_circle);
        var Bbox = element.getBBox();
        var coord_y = Bbox.cy;
        var states = [{cy: coord_y}, {cy: 500}, {cy: 320}];

        (function animateCircle(el, i) {
            el.animate(states[i], 2000, function() {
                animateCircle(el, ++i in states ? i : 0);
            });
        })(element, 0);
    }

    function drawLineHeader(circle){
        var stringPath = lineHeader.attr("d");
        var element = Snap("#"+circle);
        var Bbox = element.getBBox();
        paperHeader.append(element);
        var coord_y = Bbox.cy;
        var coord_x = Bbox.cx;

        if(stringPath) lineHeader.attr({d: stringPath + "L " + coord_x + "," + coord_y});
        else lineHeader.attr({d: "M " + coord_x + "," + coord_y});
    }

    for(var count = 1; count < 8; count++){
        var s_temp = "Hcircle" + count;
        drawLineHeader(s_temp);
        flyCircle(s_temp);
    }

html:

<svg class="circle_anim">
                    <circle id="Hcircle1" fill="#9B9B9C" cx="0" cy="60%" r="9"/>
                    <circle id="Hcircle2" fill="#9B9B9C" cx="6%" cy="99%" r="9"/>
                    <circle id="Hcircle3" fill="#9B9B9C" cx="23%" cy="78%" r="9"/>
                    <circle id="Hcircle4" fill="#9B9B9C" cx="40%" cy="82%" r="9"/>
                    <circle id="Hcircle5" fill="#9B9B9C" cx="65%" cy="91%" r="9"/>
                    <circle id="Hcircle6" fill="#9B9B9C" cx="80%" cy="99%" r="9"/>
                    <circle id="Hcircle7" fill="#9B9B9C" cx="100%" cy="55%" r="9"/>
                </svg>

css:

.circle_anim{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

Answer 1

js:

var paperHeader = Snap(".circle_anim");

var lineHeader = paperHeader.path("").attr({id: "line", fill: "transparent", stroke: "#9b9b9c", strokeWidth: 2});

var states = [{cy: 400}];
var test = 1;

function flyCircle(name_circle){
    var element = Snap("#"+name_circle);
    var Bbox = element.getBBox();
    var coord_y = Bbox.cy;
    var coord_x = Bbox.cx;
    var elemStates = [{cx: coord_x, cy: coord_y}].concat(states);

    (function animateCircle(el, i) {
        el.animate(elemStates[i], 2000, function() {
            animateCircle(el, ++i in elemStates ? i : 0);
        });
    })(element, 0);
}

function animatePath() {
    var element = Snap("#line"),
        initAttrs = element.attr('d');

var elemStates = [initAttrs].concat(states);

(function animateLineLife(el, i, initAttrs) {
    el.animate(parseLineAttrs(elemStates[i], initAttrs), 2000, function() {
        animateLineLife(el, ++i in elemStates ? i : 0, initAttrs);
    });
})(element, 0, initAttrs);
}

function parseLineAttrs(position, initAttrs) {
    var attr = initAttrs;

if (typeof position === 'string') {
    return { d: position };
}

var paths = attr.split(' ');
var coords = paths.map(function(item) {
    return item.replace('L', '').split(',');
})

var newCoords = coords.map(function (item, index) {
    if (item.length === 1) {
        return item[0];
    }

    if (index < coords.length - 1) {
        item[0] = position.cx ? position.cx : item[0];
        item[1] = (position.cy ? position.cy : item[0]) + 'L';
    } else {
        item[0] = (position.cx ? position.cx : item[0]);
        item[1] = (position.cy ? position.cy : item[0]);
    }

    return item.join(',');
});

return {d: newCoords.join(' ')};
}
function drawLineHeader(circle){
    var stringPath = lineHeader.attr("d");
    var element = Snap("#"+circle);
    var Bbox = element.getBBox();
    var coord_y = Bbox.cy;
    var coord_x = Bbox.cx;

if(stringPath) lineHeader.attr({d: stringPath + "L " + coord_x + "," + coord_y});
else lineHeader.attr({d: "M " + coord_x + "," + coord_y});
}

for(var count = 1; count < 8; count++){
    var s_temp = "Hcircle" + count;
    drawLineHeader(s_temp);
    flyCircle(s_temp);
}

animatePath();

html:

<svg class="circle_anim" id="svg">
                <circle id="Hcircle1" fill="#9B9B9C" cx="0" cy="60%" r="9"/>
                <circle id="Hcircle2" fill="#9B9B9C" cx="6%" cy="99%" r="9"/>
                <circle id="Hcircle3" fill="#9B9B9C" cx="23%" cy="78%" r="9"/>
                <circle id="Hcircle4" fill="#9B9B9C" cx="40%" cy="82%" r="9"/>
                <circle id="Hcircle5" fill="#9B9B9C" cx="65%" cy="91%" r="9"/>
                <circle id="Hcircle6" fill="#9B9B9C" cx="80%" cy="99%" r="9"/>
                <circle id="Hcircle7" fill="#9B9B9C" cx="100%" cy="55%" r="9"/>
            </svg>

css:

.circle_anim{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

当圆圈移动时我需要重新绘制连接线 SNAP SVG

I need to redraw connected lines when circles moves SNAP SVG

html

javascript

animation

svg

snap.svg