在Javascript

Question

我正在尝试为给定元素设置动画以绕过预定义的半径，并且我无法在给定的Y点处获取元素的位置。

我试图用圆圈方程找到每个点，但我只能从两个可能的点中找到一个点。

在Javascript中，我使用Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2)来说明问题。假设圆的中心是0,0。 但是我需要将它转换为屏幕上的像素，因为浏览器上的位置没有负像素。

所有尺寸都与窗口有关。所以半径，例如，是我测试中窗口高度的80％。

另外，我正在尝试计算每个帧之间的元素距离应该是多长时间，但我还没有使用它，因为我尝试先解决上面的问题。

这就是我所拥有的（清理版）：

let height = window.innerHeight * 0.8,
    radius = height / 2,
    circumferance = (radius * 2) * Math.PI,
    container = document.getElementById('container'),
    rotating = document.querySelector('.rotating'),
    centerX = radius - (rotating.offsetWidth / 2),
    centerY = radius - (rotating.offsetHeight / 2),
    duration = 10,
        stepDistance = circumferance / 16;

// Setting the dimensions of the container element.
container.style.height = height + 'px';
container.style.width = height + 'px';

// return positive X of any given Y.
function getXOffset(y) {
    return Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2);
}

// Setting the position of the rotating element to the start.
rotating.style.top = 0 + 'px';
rotating.style.left = centerX + 'px';

setInterval(() => {
  let top = parseInt(rotating.style.top),
        y = radius - top;

    rotating.style.top = (top + 1) + 'px';
    rotating.style.left = (centerX + getXOffset(y)) + 'px';
}, 16);

这是一个小小的代码，用于尝试在点之间获得适当的距离以获得更平滑的动画（目前需要修复，但它还没有打扰我。） https://jsfiddle.net/shock/1qcfvr4y/

最后注意：我知道可能还有其他方法可以使用CSS，但我选择使用javascript进行学习。

Answer 1

Math.sqrt只返回正根。您必须根据应用程序考虑负值。在这种情况下，您需要在周期的前半部分为正x值，在下半年为负。 为此，您应该实现一种方法来跟踪进度并相应地反转符号。

Here is a sample。我修改了你的。

编辑：

而不是Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2)如果您不想将原点视为中心，则可以使用完整的公式来获取x，在这种情况下，Math.sqrt( Math.pow(radius, 2) - Math.pow((actualY - centerY), 2) , 2)

说明：

原始等式(x-a)² + (y'-b)² = r² 变为x = √(r² - (y'-b)²) + a

  

假设.rotating框的宽度和高度为0。

代码中的变量等效项为centerX = a，centerY = b。 假设原点为中心，您基本上都在进行预先计算，以使y值等同于(y'-b)。因此x = √(r² - y²) + a有效。

  

初始状态top = 0

即(y'-b) =＆gt; height - centerY。 在您的代码中y = radius =＆gt; height/2。 现在(height - centerY)等于(height/2)是您的圆圈被一个方形容器绑定的副作用，该容器的高度决定了y值。

换句话说，当您使用原点作为中心时，您将在圆等式之外取中心偏移并单独处理它。您可以使用整个公式（即x = √(r² - (y'-b)²) + a

）执行相同的操作