Javascript 我使用拉斐尔的动画落后了，为什么？

我已经设置了一个圆，圆在渲染时似乎会抖动。是什么导致动画滞后？我怎样才能使它光滑

我试图用调用

animate（）

来代替使用

setInterval（）

，从注释代码中可以看出，这是徒劳的

var窗口高度=400；
var窗口宽度=600；
var纸张=拉斐尔（0，0，窗宽，窗高）；
圆=功能（纸张、x、y、r、颜色）{
这张纸=纸；
这个.x=x；
这个。y=y；
这个。r=r；
这个颜色=颜色；
这是1.xd=1；
这1.yd=1；
这是埃伦；
}
Circle.prototype.create=函数（）{
this.elem=this.paper.circle（this.x，this.y，this.r）；
this.elem.attr（“填充”，this.color）；
this.elem.attr（“笔划”，this.color）；
}
Circle.prototype.move=函数（）{
if（this.x<0 | | this.x>窗口宽度）{
this.xd=-this.xd；
}
if（this.y<0 | | this.y>窗口高度）{
this.yd=-this.yd；
}
this.x+=this.xd；
this.y+=this.yd；
this.elem.attr（“cx”，this.x）；
this.elem.attr（“cy”，this.y）；
}
Circle.prototype.animate=函数（x，y）{
这是动画({
cx:x，
塞：是的
}，1000，“线性”）；
}
var循环=新循环（纸张，0,0,30，#f00”）；
circle.create（）；
setInterval（函数（）{
圈。移动（）；
}, 1);
//圆。动画（300300）；​​

这是间隔为1毫秒的

设置间隔的副作用。浏览器无法真正处理这一点。相反，根据时间计算位置，并且仅在最后一帧完成时请求新帧：

var _requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(f) { setTimeout(f, 16); };

var lastUpdate = new Date().getTime();

var update = function() {
    // How many milliseconds has it been since the last update?
    var now = new Date().getTime();
    var d = now - lastUpdate;
    lastUpdate = now;

    // Now, move the ball based on the difference.
    // Looping is not the right way to go about this, mind.
    var amountBallMoved = d / 33;

    for(var i = 0; i < amountBallMoved; i++)
        circle.move();

    // And finally, request the next animation frame.
    _requestAnimationFrame(update);
};

update();​​​

var\u requestAnimationFrame=window.requestAnimationFrame | window.webkitRequestAnimationFrame | window.mozRequestAnimationFrame | window.msRequestAnimationFrame | window.oRequestAnimationFrame |函数（f）{setTimeout（f，16）}；
var lastUpdate=new Date（）.getTime（）；
var update=函数（）{
//自上次更新以来有多少毫秒？
var now=new Date（）.getTime（）；
var d=现在-上次更新；
lastUpdate=now；
//现在，根据差异移动球。
//注意，循环不是正确的方法。
var amountBallMoved=d/33；
对于（var i=0；i

这是间隔为1毫秒的
设置间隔的副作用。浏览器无法真正处理这一点。相反，根据时间计算位置，并且仅在最后一帧完成时请求新帧：

var _requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(f) { setTimeout(f, 16); };

var lastUpdate = new Date().getTime();

var update = function() {
    // How many milliseconds has it been since the last update?
    var now = new Date().getTime();
    var d = now - lastUpdate;
    lastUpdate = now;

    // Now, move the ball based on the difference.
    // Looping is not the right way to go about this, mind.
    var amountBallMoved = d / 33;

    for(var i = 0; i < amountBallMoved; i++)
        circle.move();

    // And finally, request the next animation frame.
    _requestAnimationFrame(update);
};

update();​​​

var\u requestAnimationFrame=window.requestAnimationFrame | window.webkitRequestAnimationFrame | window.mozRequestAnimationFrame | window.msRequestAnimationFrame | window.oRequestAnimationFrame |函数（f）{setTimeout（f，16）}；
var lastUpdate=new Date（）.getTime（）；
var update=函数（）{
//自上次更新以来有多少毫秒？
var now=new Date（）.getTime（）；
var d=现在-上次更新；
lastUpdate=now；
//现在，根据差异移动球。
//注意，循环不是正确的方法。
var amountBallMoved=d/33；
对于（var i=0；i