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

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

如果使用半径对其进行标准化，则它将变为弧度角度，因此您不再需要Math.cos和Math.sin中的度数到弧度的转换。

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

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

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

Answer 2

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

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

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

2 个答案: