There are 2 circles. They constantly fly up and down. A line must pass through them. It is necessary that the line is constantly redrawn depending on the distance of these circles. Those. with every move. Using 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; } 
 <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> <script src="//cdn.jsdelivr.net/snap.svg/0.2.0/snap.svg-min.js"></script>

1 answer 1

Sketched an example in jsfiddle

The essence of this solution comes down to the need to parse the d attribute on the line line.attr('d') and set a new value for it. The parseLineAttrs function is responsible for this parseLineAttrs

I also did the animation in a different way. Here I replaced the path with the lines and animated them, it allowed us to get rid of the path parser and to make the animation more understandable {x1, y1, x2, y2} Method with lines

  • Thank you very much! You have no idea how unrealistic they helped! - Daniel Morozov
  • And how to make them fly randomly? I did 2 ways and every time I give each circle a different path. But I don’t understand which way to transfer the lines so that it also follows correctly - jsfiddle.net/uvkzcqq4/9 - Daniel Morozov
  • Everything is very simple. In this case, you need 2 States. The first point of the line is animated along the 1st position, the second point along the 2nd. http://jsfiddle.net/uvkzcqq4/14/ - PavelGorobtsov
  • How do you do it? I tried to do this for 2 weeks. All documentation on the snap rummaged. Ofgyet Big to you, thanks again! - Daniel Morozov
  • @DanielMorozov snap is nothing to do with it =) It is enough just to imagine what and how it should be animated at each of the steps. I am sure that having such a picture in front of you - you would easily solve this problem. picture Those. we see that each point is animated according to its states. This means that the line (and this is 2 points - 0 and 1, 1 and 2, 2 and 3, ...) should be animated according to these rules. - PavelGorobtsov