Страницы

Поиск по вопросам

вторник, 19 марта 2019 г.

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

Есть 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; }


Ответ

Набросал пример в jsfiddle
Суть данного решения сводится к тому, что необходимо распарсить атрибут d у линии line.attr('d') и установить для него новое значение. За это отвечает функция parseLineAttrs
Так же сделал анимацию другим способом. Здесь заменил путь на линии и анимирую их, это позволило избавиться от парсера пути и производить анимацию более понятно {x1, y1, x2, y2} Способ с линиями

Комментариев нет:

Отправить комментарий