There are two lines. The right end of the black line1 can be moved with the mouse. The coordinates of the end of the green line line2 depend on line1 through the moveline2 function.

Then added the animation of the first line by clicking on the red circle. In this case, line1 is animated, and the moveline2 function, which also starts up on this event, is triggered once and that's it. The second line remains without animation, although it is functionally related to the animated first.

It is clear that as the animation goes on, some events should be generated for which you can start redrawing the second line, but how to do it?

How to make all objects move functionally related to the only one on which the animation hangs? I use library svg.js but, probably, it is not basic. Library documentation https://svgdotjs.imtqy.com

var paper = SVG('draw').size('100%', '100%'); var line1 = paper.line(0, 100, 300, 100).stroke({ width: 5 }).style({ cursor: 'pointer' }); var line2 = paper.line(0, 200, 100, 200).stroke({ width: 5 }).attr({ stroke: 'green' }); var circle = paper.circle(30).move(50, 50).fill('red').style({ cursor: 'pointer' }); //ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ†Π° line1 ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΏΠΎΠ΄ курсор) function move(event) { line1.attr({ x2: event.pageX, y2: event.pageY }) moveline2() //Π»ΠΎΠ²ΠΈΠΌ событиС пСрСмСщСния ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° холстС paper.mousemove(function(event) { line1.attr({ x2: event.pageX, y2: event.pageY }) moveline2() }) paper.mouseup(function() { paper.mousemove(null) }) } //Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΎΡ‚ ΠΏΠ΅Ρ€Π²ΠΎΠΉ (любая) function moveline2() { var x = line1.attr('x2'); var y = line1.attr('y2'); line2.attr({ x2: x / 2, y2: (x + y) / 2 }) } //устанвка Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈΠ½Π° Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π›ΠšΠœ Π½Π°Π΄ line1 line1.on('mousedown', move) //анимация ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ circle.click(function() { line1.animate().attr({ x2: 300, y2: 400 }) moveline2() }) 
 #draw { width: 400px; height: 400px; border: 2px solid silver } 
 <!DOCTYPE html> <html> <head> <title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€</title> </head> <body> <div id='draw'></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.4.0/svg.min.js"></script> </body> </html>

  • Add a link to the library in question - Grundy
  • @Grundy, but in html what? " cdnjs.cloudflare.com/ajax/libs/svg.js/2.4.0/svg.min.js " - Yuri
  • @Yuri, obviously a link to a minified script. but not on documentation - Grundy
  • Link to documentation link - andrey.ilinskiy
  • @ andrey.ilinskiy, add it to the question - Grundy

1 answer 1

To perform your own function during the animation you need to use during / duringAll functions.

 var paper = SVG('draw').size('100%', '100%'); var line1 = paper.line(0, 100, 300, 100).stroke({ width: 5 }).style({ cursor: 'pointer' }); var line2 = paper.line(0, 200, 100, 200).stroke({ width: 5 }).attr({ stroke: 'green' }); var circle = paper.circle(30).move(50, 50).fill('red').style({ cursor: 'pointer' }); //ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ†Π° line1 ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΏΠΎΠ΄ курсор) function move(event) { line1.attr({ x2: event.pageX, y2: event.pageY }) moveline2() //Π»ΠΎΠ²ΠΈΠΌ событиС пСрСмСщСния ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° холстС paper.mousemove(function(event) { line1.attr({ x2: event.pageX, y2: event.pageY }) moveline2() }) paper.mouseup(function() { paper.mousemove(null) }) } //Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΎΡ‚ ΠΏΠ΅Ρ€Π²ΠΎΠΉ (любая) function moveline2() { var x = line1.attr('x2'); var y = line1.attr('y2'); line2.attr({ x2: x / 2, y2: (x + y) / 2 }) } //устанвка Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈΠ½Π° Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π›ΠšΠœ Π½Π°Π΄ line1 line1.on('mousedown', move) //анимация ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ circle.click(function() { line1.animate().attr({ x2: 300, y2: 400 }).during(function(pos, morph, eased, situation) { moveline2() }); }); 
 #draw { width: 400px; height: 400px; border: 2px solid silver } 
 <!DOCTYPE html> <html> <head> <title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€</title> </head> <body> <div id='draw'></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.4.0/svg.min.js"></script> </body> </html>

  • Thank you, @Grundy! Exactly what is needed. I will read the documentation more attentively) - andrey.ilinskiy