光标过渡持续时间会产生轻微的滞后

Question

我正在制作一个始终指向某个对象的光标。

不幸的是，我的 transition-duration 使光标在快速移动时滞后。我如何在不消除过渡持续时间的情况下解决这个问题，因为它可以平滑运动？还有其他选择吗？

ps。我是 JS (JQuery) 新手，所以如果您对我的代码有任何改进，请告诉我。

jQuery(function($) {
  let mousePos = {
    x: 0,
    y: 0
  }

  let lastMove = 0;

  function onMouseMove(e) {
    mousePos.x = e.pageX;
    mousePos.y = e.pageY;
    $(".cursor").setAngle(calcAngle(getCenter($(".light")), getCenter($(".cursor"))));
    $(".cursor").setPos(e.pageX, e.pageY);
    lastMove = Date.now();
  }

  //gets the center
  function getCenter(container) {
    let containerCenter = {
      x: $(container).offset().left + $(container).width() / 2,
      y: $(container).offset().top + $(container).height() / 2
    };
    return containerCenter;
  }

  //calculates an angle between two elements (obj2 is pointing towards obj1)
  function calcAngle(obj1, obj2) {
    let angle = Math.atan2(obj1.x - obj2.x, -(obj1.y - obj2.y)) * (180 / Math.PI);
    return angle;
  }

  //sets the position
  $.fn.setPos = function(x, y) {
    this.css({
      "left": (x - this.width() / 2) + "px",
      "top": (y - this.height() / 2) + "px",
    });
  };

  //sets the rotation of an element
  $.fn.setAngle = function(angle) {
    this.css({
      "transform": "rotate(" + angle + "deg)",
      "-webkit-transform": "rotate(" + angle + "deg)"
    });
  };
  addEventListener("mousemove", onMouseMove);
});

body {
  height: 100vh;
  background: grey;
  overflow: hidden;
}

.light {
  position: absolute;
  background-color: #fff;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}

.cursor {
  background-color: white;
  width: 20px;
  height: 20px;
  border: 1px solid white;
  border-radius: 10%;
  position: absolute;
  transition-duration: 200ms;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
  <div class="light"></div>
  <div class="cursor"></div>
</body>

Answer 1

我建议以后使用 canvas 用于此应用程序

现在您可以使用 transform 而不是 top 和 left

  let mousePos = {
    x: 0,
    y: 0
  }

  let lastMove = 0;

  function onMouseMove(e) {
    mousePos.x = e.pageX;
    mousePos.y = e.pageY;
    angle = calcAngle(getCenter($(".light")), getCenter($(".cursor")));
    $(".cursor").setTransform(e.pageX, e.pageY, angle);
    lastMove = Date.now();
  }

  //gets the center
  function getCenter(container) {
    let containerCenter = {
      x: $(container).offset().left + $(container).width() / 2,
      y: $(container).offset().top + $(container).height() / 2
    };
    return containerCenter;
  }

  //calculates an angle between two elements (obj2 is pointing towards obj1)
  function calcAngle(obj1, obj2) {
    let angle = Math.atan2(obj1.x - obj2.x, -(obj1.y - obj2.y)) * (180 / Math.PI);
    return angle;
  }

  //sets transform
  $.fn.setTransform = function(x, y, a) {
    x = x - this.width()
    y = y - this.height()
    this.css({
      "transform": "translate(" + x + "px, " + y + "px) rotate(" + a + "deg)",
      "-webkit-transform": "translate(" + x + "px, " + y + "px) rotate(" + a + "deg)",
    });
  };
  addEventListener("mousemove", onMouseMove);

body {
  height: 100vh;
  background: grey;
  overflow: hidden;
}

.light {
  position: absolute;
  background-color: #fff;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}

.cursor {
  background-color: white;
  width: 20px;
  height: 20px;
  border: 1px solid white;
  border-radius: 10%;
  position: absolute;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
  <div class="light"></div>
  <div class="cursor"></div>
</body>

光标过渡持续时间会产生轻微的滞后

cursor transition-duration creates slight lags

html

javascript

css

jquery