javascript - JavaScript 中的圆周运动未按预期工作

Question

我试图指出使用 JS 遵循特定的路径。但由于某种原因，它完全偏离了路径，只是沿着一条线移动，而不是绕圈移动。

以下是我的标记、CSS 和 JS:

(function() {
  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  const circleOne = document.getElementById('circle-one');
  const circleOnePoint = document.getElementById('circle-one-point');

  let maxX = circleOne.clientWidth - circleOnePoint.offsetWidth;
  let maxY = circleOne.clientHeight - circleOnePoint.offsetHeight;

  const duration = 4;
  const gridSize = 100;

  let start = null;

  function step(timeStamp) {
    let progress, x, y;
    if (start === null) {
      start = timeStamp;
    }

    progress = (timeStamp - start) / duration / 1000;

    x = Math.sin(progress * 2 * Math.PI);
    y = Math.cos(progress * 2 * Math.PI);

    circleOnePoint.style.left = maxX / 2 + (gridSize * x) + "px";
    circleOnePoint.style.bottom = maxY / 2 + (gridSize * y) + "px";

    if (progress >= 1) start = null;
    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
})();

.center-content {
  width: 100%;
  height: 100%;
}

#circle-one {
  opacity: 50%;
  position: absolute;
  width: 454px;
  height: 454px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.5px solid black;
}

#circle-one-point {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: black;
}

<div class="center-content">
  <div id="circle-one"></div>
  <div id="circle-one-point"></div>
</div>

更新这是我已经走了多远:

(function() {
  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  const circleOne = document.getElementById('circle-one');
  const circleOnePoint = document.getElementById('circle-one-point');

  let maxX = circleOne.clientWidth - circleOnePoint.offsetWidth;
  let maxY = circleOne.clientHeight - circleOnePoint.offsetHeight;

  const duration = 4;
  const gridSize = 100;

  let start = null;

  function step(timeStamp) {
    let progress, x, y;
    if (start === null) {
      start = timeStamp;
    }

    progress = (timeStamp - start) / duration / 1000;

    x = Math.sin(progress * 2 * Math.PI);
    y = Math.cos(progress * 2 * Math.PI);

    circleOnePoint.style.left = maxX / 2 + (gridSize * x) + "px";
    circleOnePoint.style.top= maxY / 2 + (gridSize * y) + "px";

    if (progress >= 1) start = null;
    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
})();

.center-content {width: 100%;height: 100%;}
.circles{position: relative;}
#circle-one {
    opacity: 50%;
    position: fixed;
    width: 454px;
    height: 454px;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 0.5px solid black;
    background-color: black;
}
#circle-one-point {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: green;
}

<div class="circles">
    <div id="circle-one"></div>
    <div id="circle-one-point"></div>                    
</div>

这应该遵循我使用 Circle-one 边框制作的路径，但它就是行不通!

Answer 1

在 CSS 中，您要设置 circle-one-point 的 left 和 top 属性:

#circle-one-point {
  top: 50%;
  left: 100%;
  /* ... */
}

但是在脚本中您要设置left和bottom:

circleOnePoint.style.left = maxX / 2 + (gridSize * x) + "px";
circleOnePoint.style.bottom = maxY / 2 + (gridSize * y) + "px";

请注意，top 将保持在 50%，这将导致点保持在同一水平线上。

一种解决方案:在脚本中设置 top 而不是 bottom:

circleOnePoint.style.left = maxX / 2 + (gridSize * x) + "px";
circleOnePoint.style.top = maxY / 2 + (gridSize * y) + "px";