Рисовать линию между двумя объектами которые движутся snap svg

#javascript #html #анимация #svg #snapsvg

Есть 2 круга. Они постоянно летают вверх и вниз. Через них должна проходить линия.
Нужно чтобы линия постоянно перерисовывалась в зависимости от расстояние этих кругов.
Т.е. при каждом движении.
С помощью snap svg*



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);
}
.circle_anim {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}






    

Ответы

Ответ 1

Набросал пример в jsfiddle

Суть данного решения сводится к тому, что необходимо распарсить атрибут d у линии
line.attr('d') и установить для него новое значение.
За это отвечает функция parseLineAttrs

Так же сделал анимацию другим способом. Здесь заменил путь на линии и анимирую их,
это позволило избавиться от парсера пути и производить анимацию более понятно {x1,
y1, x2, y2}
Способ с линиями