2013-02-03 80 views
2

我試圖在對角線方向上在畫布上畫一個圓圈。我正在使用requestanimationframe。它可以在所有瀏覽器中順利運行,但不能在Firefox中運行。動畫正在持續閃爍。請有人告訴我我在做什麼錯。我需要在Firefox中以合理的速度流暢使用animatin。Firefox中的requestAnimationFrame閃爍問題

這裏是我的簡單的代碼,也許有人能指出我是缺少在這裏..:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<style> 
/*html { background: #000; }*/ 
</style> 

<title>Test</title> 
</head> 

<body> 
<script type="text/javascript"> 

    window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(/* function */ callback, /* DOMElement */ element){ 
       window.setTimeout(callback, 1000/60); 
       }; 
    })(); 

window.cancelRequestAnimFrame = (function() { 
    return window.cancelAnimationFrame   || 
     window.webkitCancelRequestAnimationFrame || 
     window.mozCancelRequestAnimationFrame  || 
     window.oCancelRequestAnimationFrame  || 
     window.msCancelRequestAnimationFrame  || 
     clearTimeout 
})(); 

var canvas, context, toggle; 
var ctr = 0; 
var request; 

var x = 10; 
var y = 10; 


init(); 
animate(); 

function init() { 

    canvas = document.createElement('canvas'); 
    canvas.width = 512; 
    canvas.height = 512; 

    context = canvas.getContext('2d'); 

    document.body.appendChild(canvas); 

} 

function animate() { 


    request = requestAnimFrame(animate); 
    draw(); 

} 

function draw() { 

    context.clearRect(0,0,canvas.width,canvas.height); 
    y+=2; 
    x+=2; 

    context.beginPath(); 
    context.arc(x, y, 3, 0, 2 * Math.PI, false); 
    context.fillStyle = 'green'; 
    context.fill(); 
    context.lineWidth = 5; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 

    //cancelRequestAnimFrame(request); 

} 

</script> 

</body> 
</html> 
+0

我期待一個非常快速的回答這個問題的方案是非常簡單的。在Firefox中不可能有平滑的html5 canvas動畫嗎?爲什麼它很難在Firefox中完成它,我想知道! – user1655003

+0

我在Mac上看不到Firefox 18中的閃爍。你使用的是哪個版本的Firefox? –

+0

我剛剛在windows pc上的Firefox 18上試了一下。這不光滑。它在Chrome中完美工作,但在Firefox中我可以看到它不光滑。也許這是最好的Firefox可以做的。我的客戶使用Firefox,所以我必須對這個問題做點事情!在這個例子中,我把一個簡單的圓形場景移動到畫布上。我的實際項目包含圖像背景和每個循環迭代中的offcourse javascript邏輯。在Chrome中,IE和safari都運行良好。有任何想法嗎!! – user1655003

回答

1

有在你的代碼兩件事情你需要修改:

首先嘗試新的​​填充。

(function() { 
    var lastTime = 0; 
    var vendors = ['ms', 'moz', 'webkit', 'o']; 
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
     window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 
     window.cancelRequestAnimationFrame = window[vendors[x]+ 
      'CancelRequestAnimationFrame']; 
    } 

    if (!window.requestAnimationFrame) 
     window.requestAnimationFrame = function(callback, element) { 
      var currTime = new Date().getTime(); 
      var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
       timeToCall); 
      lastTime = currTime + timeToCall; 
      return id; 
     }; 

    if (!window.cancelAnimationFrame) 
     window.cancelAnimationFrame = function(id) { 
      clearTimeout(id); 
     }; 
}()) 

對於深入解釋閱讀這篇文章:http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

您需要更改的第二件事是計算一個時間戳和另一個之間的增量時間。在你的代碼中,你正在使用一個固定值,在每次渲染迭代中增加一個。因爲它可能發生你的瀏覽器無法渲染每幀可能會跳過一兩幀。這樣你就可以順利進行。

這就是您計算增量時間的方式:

end = Date.now(); 
delta = (end - start)/1000.0 * 60; 
end = start; 

http://jsfiddle.net/p5c6c/1/

+1

感謝您的信息。那麼我已經嘗試過這個polyfill,並且動畫仍然不夠流暢。我不知道你提到的德爾塔時間。我看到你在我的代碼中添加了delta因子..但不幸的是,它仍然在我的firefox.damn firefox上閃爍。 (你是否使用這個代碼獲得流暢的動畫?如果是的話,哪個FF版本!)我也讀過這篇文章,但我無法知道在firefox中使用流暢的(如在其他瀏覽器中)動畫的祕密。現在我已經嘗試了數週。我現在完全被Firefox困住了。 – user1655003

+0

FF 18.0.1。起初的負載並不像應該的那樣平滑(也許這是因爲文檔沒有完全渲染),但是在很長一段時間內,與你的方法相比,肯定會變得更加平滑,在那裏我跳過了幀。 'window.onload = function()'我應該可以解決這個問題。 –

+0

那麼問題依然存在。我的客戶端的Firefox也有同樣的問題。它並不完全平滑。我對平滑度的定義是,這個動畫是如何在Chrome中運行的。 – user1655003