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

Question

我有一个函数可以围绕一个圆圈旋转一个对象。我把绕一圈的时间定在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();

我这里的动画运行也设置为 10,000 毫秒，但它的旋转速度比这快得多：http://jsfiddle.net/7geez8bf/

所以，我想知道如何更正它以在我声明的时间长度内轮换？

Answer 1

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

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);                               
}

Answer 2

你的angle其实还是圆周的一部分（长度/时间*时间），不是角

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

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

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

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

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

Rotate object around a circle within the specified time

javascript

math

rotation