Анимация SVG: перемещать фигуру в направлении мыши/вращать вокруг фиксированной точки?

Просмотрев похожие вопросы, размещенные на форуме, и не найдя ничего, что помогло бы мне решить мою собственную проблему, я публикую это.

Я использую SVG.js для создания фигур SVG в веб-документе. Я бы хотел, чтобы одна из этих фигур «следовала» за мышью/курсором.

Под этим я подразумеваю: фигура имеет фиксированное положение/точку привязки (в ее исходном центре), и она может перемещаться только на ограниченное расстояние (скажем, 50 пикселей) от этой фиксированной точки. Я хочу, чтобы фигура двигалась в направлении курсора всякий раз, когда курсор перемещается, но не дальше, чем на определенное расстояние от его исходного положения. Я прилагаю короткую анимацию, чтобы проиллюстрировать мое описание:

введите здесь описание изображения

Если бы курсор исчез, фигура вернулась бы к своему первоначальному центру.

Я хорошо разбираюсь в Javascript, HTML и CSS. Этот тип манипулирования элементами является новым для меня, и математика вызывает у меня головную боль, любая помощь будет отличной.

Похоже, мне нужно, чтобы фигура в основном вращалась вокруг своего исходного центра под углом относительно курсора? Я действительно не уверен, как это решить. Я попытался использовать метод для вычисления угла , описанный в этом сообщении. Моя фигура движется, но не так, как предполагалось:

// init
var draw = SVG().addTo('body')

// draw 
window.shape = draw.circle(25, 25).stroke({
  color: '#000',
  width: 2.5
}).fill("#fff");
shape.attr("id", "circle1");
shape.move(50, 50)


// move
var circle = $("#circle1");
var dist = 10;

$(document).mousemove(function(e) {

  // angle
  var circleCenter = [circle.offset().left + circle.width() / 2, circle.offset().top + circle.height() / 2];
  var angle = Math.atan2(e.clientX - circleCenter[0], -(e.clientY - circleCenter[1])) * (180 / Math.PI);

  var x = Math.sin(angle) * dist;
  var y = (Math.cos(angle) * dist) * -1;

  shape.animate().dmove(x, y);

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Примечание. Для меня не имеет значения, зависит ли решение от jQuery или нет (в идеале — нет).


javascript svg animation onmousemove svg.js
person JoSch    schedule 19.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Повозившись с некоторыми решениями для расчета углов и расстояний, я нашел ответ.

Я использую фиксированную контрольную точку для расчета угла прямой линии между центром фигуры и курсором. Затем я перемещаю фигуру относительно этой контрольной точки на заданную величину:

// Init canvas
var draw = SVG().addTo('body')

// Draw reference/anchor
var shape_marker_center = draw.circle(3,3).fill("#f00").move(150, 150);;
var grafikCenter = [shape_marker_center.attr("cx"), shape_marker_center.attr("cy")]

// Draw shapes
var shape = draw.circle(25, 25).stroke({color: '#000', width: 2.5 }).fill("none");
shape.attr("id", "circle1").attr({cx: grafikCenter[0], cy:grafikCenter[1]})
var shape2 = draw.circle(50, 50).stroke({color: '#000', width: 2.5 }).fill("none");
shape2.attr("id", "circle2").attr({cx: grafikCenter[0], cy:grafikCenter[1]})
var shape3 = draw.circle(75, 75).stroke({color: '#000', width: 2.5 }).fill("none");
shape3.attr("id", "circle3").attr({cx: grafikCenter[0], cy:grafikCenter[1]})

$(document).mousemove(function(e) {
  var pointA = [shape_marker_center.attr("cx"), shape_marker_center.attr("cy")];
  var pointB = [e.clientX, e.clientY];
  var angle = Math.atan2(pointB[1] - pointA[1], pointB[0] - pointA[0]) * 180 / Math.PI ;
  //
  var distance_x_1 = Math.cos(angle*Math.PI/180) * 16;
  var distance_y_1 = Math.sin(angle*Math.PI/180) * 16;
  var distance_x_2 = Math.cos(angle*Math.PI/180) * 8;
  var distance_y_2 = Math.sin(angle*Math.PI/180) * 8;
  //
  shape.center((grafikCenter[0] + distance_x_1), (grafikCenter[1] + distance_y_1));
  shape2.center((grafikCenter[0] + (distance_x_2) ), (grafikCenter[1] + (distance_y_2)));
})
svg {
  width: 100vw;
  height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

person JoSch    schedule 20.03.2020