Как получить анимацию svg объекта, который связан через js с другим svg объектом, задавая анимацию только второму?

435

05 февраля 2017, 14:06

Имеется две линии. Правый конец черной line1 можно передвигать мышкой. При этом координаты конца зеленой линии line2 зависят от line1 через функцию moveline2.

Далее добавил анимацию первой линии по клику на красный круг. При этом line1 анимируется, а функция moveline2, которая также пускается по этому событию срабатывает один раз и все. Вторая линия остается без анимации, хотя функционально связана с анимированной первой.

Понятно, что по мере того, как идет анимация должны генерироваться какие-то события по которым можно пускать перерисовку второй линии, но как это сделать?

Как заставить двигаться все объекты функционально связанные с единственным, на котором висит анимация? Использую библиотеку svg.js но, видимо, это не принципиально. Документация по библиотеке https://svgdotjs.github.io

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>

Answer 1

Для выполнения собственной функции в течение анимации нужно использовать функции during/duringAll

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>