Как анимировать элемент, чтобы он следовал за движениями мыши внутри div? - PullRequest
Новая
       7

Как анимировать элемент, чтобы он следовал за движениями мыши внутри div?

0 голосов
/ 15 января 2020

Я пытаюсь создать элемент, который будет следовать движениям мыши в пределах ограничений контейнера div с использованием jQuery animate. Когда мышь перемещается, элемент изменяется на абсолютное позиционирование, соответствующее его текущей позиции, а затем перемещается к позиции мыши, но внутри элемента div.

Кажется, я не могу правильно определить вертикальное положение: элемент всегда выше контейнера, а иногда он перемещается в направлении, противоположном тому, что он должен (т. Е. Мышь перемещается вниз, и элемент движется вверх). У меня не было проблем с горизонтальным позиционированием.

Вот код: 

var executed = false;
var dronePos = $("#drone").offset().top;

$("body").mousemove(function(event) {

    var x;
    var y;

    //Vertical positioning: If the mouse position is greater than or equal to the left offset of the drone container, and less than or equal to the left offset of the drone container plus the width (if it falls within the drone container)

    if (event.pageX >= $("#droneContainer").offset().left && event.pageX <= $("#droneContainer").offset().left + $("#droneContainer").width()){
        x = event.pageX;

    } else { //if it's to the left
        if (event.pageX < $("#droneContainer").offset().left){
            x = $("#droneContainer").offset().left; 
        }
        else { //if it's to the right
            x = $("#droneContainer").offset().left + $("#droneContainer").width();
        }
    }   

    //Horizontal positioning: If the mouse position is greater than or equal to the to offset of the drone container, and less than or equal to the top offset of the drone container plus the height (if it falls within the drone container)

    if (event.pageY >= $("#droneContainer").offset().top && event.pageY <= $("#droneContainer").offset().top + $("#droneContainer").height()){
        y = event.pageY - dronePos;
    } else { //if it's above
        if (event.pageY < $("#droneContainer").offset().top){
            y = $("#droneContainer").offset().top - dronePos;   
        } else { //if it's below
            y = ($("#droneContainer").offset().top + $("#droneContainer").height()) - dronePos;
        }
    }

    if (executed == false){
        executed = true;
        var position = $("#drone").position();
        $("#drone").css({top: position.top, left: position.left, position:"absolute"}); 
    }

    $("#drone").stop().animate({
        left: x, 
        top: y
    }, 800, "swing");

    dronePos = $("#drone").offset().top;

});

Любая помощь высоко ценится! ?

1 Ответ

1 голос
/ 15 января 2020

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

Также, на мой взгляд, воздерживаться от использования jQuery animate. CSS действительно стал очень мощным и может сделать для вас большую работу по позиционированию и переходам.

Надеюсь, это поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать. 

var $container = $('.container');
var $drone = $('.drone');
var droneCenter = {
  x: $drone.width() / 2,
  y: $drone.height() / 2
};

$container.on('mousemove', function(event) {
  $drone.css('transform', `translate3d(${event.offsetX - droneCenter.x}px, ${event.offsetY - droneCenter.y}px, 0)`);
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  align-items: safe center;
  justify-content: safe center;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  max-width: 1000px;
  max-height: 1000px;
  padding: 15px;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
}

.drone {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
  transition: transform 800ms ease-out;
  will-change: transform;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="drone"></div>
  </div>
</div>
...