游標轉換持續時間會產生輕微的滯后-有解無憂

我正在制作一個始終指向物件的游標。

transition-duration不幸的是，我的游標滯后于更快的移動。如何在不消除過渡持續時間的情況下解決此問題，因為它可以平滑運動？有沒有其他選擇？

附言。我是 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", onm ouseMove);
});

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>

uj5u.com熱心網友回復：

我建議將來為此應用程式使用畫布

現在你可以使用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", onm ouseMove);

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475272.html

標籤：javascript html jQuery css

上一篇：影像樣式的CSS和HTML問題

下一篇：修復未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“樣式”）