如何使用jQuery使DOM对象沿着圆形路径移动？

Question

我正在尝试使用jQuery使DOM对象沿着圆形路径移动。目前，我正在尝试通过重新排列简单的圆形方程来确定路径，因此伪代码如下:

x = 任意值 y = abs(sqrt(常量) - x)

这是目前为止我所拥有的。

$(window).on('scroll', function() 
{
    //get intitial ratio
    vRatio = (sky.dHeight - sky.height ) / (sky.height - 100)
    hRatio = (sky.dHeight - sky.height ) / (sky.width - 100)

    rawX = $(window).scrollTop() / hRatio;
    x = rawX - sky.width/2;
    y = Math.abs(Math.sqrt(sky.width/2) - x);

    console.log(x)
    console.log(y)

    sun.ob.css({left : rawX, top: y})
})

目前，它遵循的是三角形路径，而不是我眼中寻求的温和的圆形流动。

为了提供一些背景信息，这是一个视差样式的文档，高度为数千像素（因此需要比率）。

- Jake Whiteley

---

这里使用jfiddle会很方便。当我需要将某物旋转成圆形时，通常会使用cos()和sin()函数。 - Anton D

Answer 1

我为您制作了这个fiddle示例 - 在向下滚动时使用一些CSS旋转效果：

http://jsfiddle.net/cWqKL/3/

$(window).scroll(function () {
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height() - $(window).height();
    var scrollPercent = (scrollAmount / documentHeight);
    var r = 180 * scrollPercent;
    TweenMax.to($('#orbit'), 0.5, {
        rotation: r
    });
});

应该适用于任何窗口大小。

- brutzel

---

很棒的答案！但由于浏览器支持的原因，我必须避免使用CSS3属性。 - Jake Whiteley

Answer 2

如果你正在寻找一个圆形路径，那么你可能需要使用cos和sin ;)

我做了一个快速的例子，展示了一个在名为“sky”的div中旋转的太阳: jsfiddle例子

var progression = 0;
update();
function update(){

    var radiusX = 200;
    var radiusY = 100;
    var speed = 0.01;

    var sky = $("#sky");
    var sun = $("#sun");

    var skyCenterX = sky.width() * 0.5 - sun.width() * 0.5;
    var skyCenterY = sky.height() * 0.5 - sun.height() * 0.5;

    progression = progression + speed;

    var sunX = skyCenterX + radiusX * Math.cos(progression);
    var sunY = skyCenterY + radiusY * Math.sin(progression);

    $("#sun").css({left : sunX, top: sunY});

    setTimeout(function(){update();}, 10);
}

我希望您能从中受益：D

- Joris van Leeuwen

---

差不多了！由于它与scrollTop位置绑定，我很烦恼我的太阳只能完成一半的旋转。我已经尝试修改这段代码，并插入不同的进度值，基于scrollTop，但我的太阳仍然会“落到地平线以下”（屏幕底部）。 - Jake Whiteley

Answer 3

通常对于圆的 (x,y) 坐标对，您需要使用 sin 和 cos，因此类似下面的内容：

x = x0 + radius*Math.cos(angle)
y = y0 + radius*Math.sin(angle)

对于以(x0,y0)为圆心，给定半径的圆。

看起来你可能想从一个x值开始，然后确定y值？为此，您可以使用以下公式：

angle = Math.acos( (x-x0)/radius )
y = y0 + radius*Math.sin(angle)

- tom10