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

Question

我有一个函数可以围绕一个圆旋转一个对象。我将时间设置为 10,000 毫秒。

但是物体在那段时间里并没有旋转，似乎快了很多。并且不确定如何纠正这一点。

设置对象 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 实际上仍然是圆周的一部分(长度/时间*时间)，而不是 Angular 。

如果用半径对其进行归一化，它就会变成弧度 Angular ，因此您不再需要 Math.cos 和 Math.sin 中的度数到弧度的转换。

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

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

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