在指定的时间内围绕一个圆旋转对象

Rotate object around a circle within the specified time

本文关键字：一个 对象 旋转 时间      更新时间：2023-09-26

我有一个函数，可以绕一个圆旋转一个对象。我将绕圆圈的时间设置为10000毫秒。

但是这个物体不会在那么长的时间内旋转，它看起来要快得多。我不确定如何纠正这一点。

我的更新函数设置对象的x，y位置，如下所示：

var obj             = [];
    var t           = {};
    var angle       = Math.random()*Math.PI*2; //start angle
        t.radius    = 200;
        t.x         = Math.cos(angle)*t.radius; //start position x
        t.y         = Math.sin(angle)*t.radius; //start position y
        t.circumference= t.radius * 2 * Math.PI;//circumference
        t.duration  = 10000; //10 seconds per rotation
        t.start     = Date.now();

obj.push(t);
function update(){
    var delta,vector,angle;
    for(var i = 0; i < obj.length; i++){
        delta       = Date.now() - obj[i].start;
        obj.start   = Date.now();
        vector      = obj[i].circumference / obj[i].duration;
        angle       = vector * delta;
        obj[i].x    = obj[i].radius * Math.cos(angle * Math.PI/180);
        obj[i].y    = obj[i].radius * Math.sin(angle * Math.PI/180);                                
    }
}
function draw(){
    update();
    // draw my object etc
    requestAnimationFrame(draw);
}
draw();

我还将此处运行的动画设置为10000毫秒，但它的旋转速度远快于此：http://jsfiddle.net/7geez8bf/

所以，我想知道如何纠正这一点，使其在我声明的时间长度内旋转？

您的angle实际上仍然是周长（长度/时间*时间）的一部分，而不是角度。

如果你用你的半径归一化它，它就会变成一个以弧度为单位的角度，所以你不再需要在Math.cos和Math.sin中进行度数到弧度的转换。

演示：http://jsfiddle.net/7geez8bf/2/

请注意，您可以通过直接记住矢量值（以弧度/毫秒为单位的角度的一部分）来轻松地分解代码。然后它变为转速，单位为弧度每毫秒：t.rotSpeed = 2 * Math.PI / t.duration);

结果：http://jsfiddle.net/7geez8bf/3/

您的代码中存在各种不一致。例如，混合弧度和度数。角度位置不应取决于周长（因为您设置的是一个完整圆的持续时间，而不是速度）。这是更新后的代码：

for(var i = 0; i < obj.length; i++){
    var delta               = Date.now() - obj[i].start;
    obj[i].start            = Date.now();
    obj[i].angle            += 2 * Math.PI * delta / obj[i].duration;
    obj[i].x                = obj[i].radius * Math.cos(obj[i].angle);
    obj[i].y                = obj[i].radius * Math.sin(obj[i].angle);                               
}
相关文章：