javascript - 三 Angular 问题，三 Angular 形绕圆的不稳定运动

Question

下面的代码应该围绕一个“看不见的”圆圈旋转一个三 Angular 形。它按照我的预期工作，但是，三 Angular 形有时似乎会在这个“圆圈”周围结结巴巴。这个东西的CPU和内存负载似乎还可以，所以我想知道这是否是四舍五入和绘图的问题……感谢帮助。
P.S 我正在使用 SetInterval 来建立帧率。我想要做的事情需要 >30 的帧率。谢谢。

var canvas = document.getElementById("game_area");
var context = canvas.getContext("2d");

var angle = 0;

var SinA = Math.sin(Math.PI);
var CosA = Math.cos(Math.PI);

var SinB = Math.sin(Math.PI-0.087);
var CosB = Math.cos(Math.PI-0.087);

var SinC = Math.sin(Math.PI+0.087);
var CosC = Math.cos(Math.PI+0.087);

canvas.width = 700;
canvas.height = 700;

var half = (canvas.width/2);

function on_enter_frame(){

    SinA = Math.sin(Math.PI+angle);
    CosA = Math.cos(Math.PI+angle);

    SinB = Math.sin(Math.PI-0.087+angle);
    CosB = Math.cos(Math.PI-0.087+angle);

    SinC = Math.sin(Math.PI+0.087+angle);
    CosC = Math.cos(Math.PI+0.087+angle);

    angle+=0.05;

    if (angle>(Math.PI*2)){
        angle=0;
    }

    context.clearRect(0,0,500,500);

    context.fillStyle = "#FFF";

    context.beginPath();
    context.moveTo(half+(SinA*50), half+(CosA*50));
    context.lineTo(half+(SinB*45), half+(CosB*45));
    context.lineTo(half+(SinC*45), half+(CosC*45));
    context.closePath();
    context.fill();
}

setInterval(on_enter_frame,30);

Answer 1

参见 http://paulirish.com/2011/requestanimationframe-for-smart-animating/有关 requestAnimationFrame 的解释以及使用它的原因。

现实情况是，requestAnimationFrame 和 setInterval 都无法提供可靠的计时，尽管使用 requestAnimationFrame 的机会应该更大。你遇到的卡顿可能是由于你计算机上的其他进程，甚至是你当前 JS 进程中的垃圾回收。

由于您的循环计时永远不会可靠，因此最好根据实际时间(或自上一帧以来耗时)来制作动画(在本例中为绕行三 Angular 形的位置)。

我看不到你遇到的卡顿情况，所以我不知道这是否会有所改善，但你可以查看一个实例，了解 requestAnimationFrame 和运行时间如何此处使用:http://jsfiddle.net/xpZxy/