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

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

0 голосов
/ 19 марта 2020

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

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

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

enter image description here

Если курсор исчезнет, ​​форма вернется в исходный центр.

Я знаю, как обходиться 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 или нет (в идеале это не так).

1 Ответ

1 голос
/ 20 марта 2020

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

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

// 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>
...