我的動畫使用拉斐爾是滯後的，爲什麼？

Question

我已經設置了一個demo illustrating animation on a circle shape，並且渲染時圓圈似乎動搖了。導致動畫滯後的原因是什麼？我怎樣才能讓它順利？

我試圖用撥打animate()來替換setInterval()的使用，正如在註釋代碼中所看到的那樣，這無濟於事。

var WINDOW_HEIGHT = 400; 
var WINDOW_WIDTH = 600; 

var paper = Raphael(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT); 

Circle = function(paper, x, y, r, color) { 
    this.paper = paper; 
    this.x = x; 
    this.y = y; 
    this.r = r; 
    this.color = color; 
    this.xd = 1; 
    this.yd = 1; 
    this.elem; 
} 

Circle.prototype.create = function() { 
    this.elem = this.paper.circle(this.x, this.y, this.r); 
    this.elem.attr("fill", this.color); 
    this.elem.attr("stroke", this.color); 
} 

Circle.prototype.move = function() { 

    if (this.x < 0 || this.x > WINDOW_WIDTH) { 
     this.xd = -this.xd; 
    } 
    if (this.y < 0 || this.y > WINDOW_HEIGHT) { 
     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 = function(x, y) { 
    this.elem.animate({ 
     cx: x, 
     cy: y 
    }, 1000, "linear"); 
} 

var circle = new Circle(paper, 0, 0, 30, "#f00"); 

circle.create(); 

window.setInterval(function() { 
    circle.move(); 
}, 1); 

//circle.animate(300, 300);​​ 

Answer 1

這是你的setInterval的副作用，間隔爲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();​​​ 

Here's an updated jsFiddle.