Есть 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}
Способ с линиями
Комментариев нет:
Отправить комментарий