動畫div邊緣模糊使用

-1

我正在學習使用div，javascript和requestAnimationFrame創建一個簡單的動畫。動畫正在工作，但有些視覺問題似乎不正確。這些問題發生在多個瀏覽器中，儘管我主要使用Chrome。我用最少的代碼創建了一個示例來演示這些問題。我知道css動畫，webGl等存在，可能會更好，但想要了解爲什麼此代碼無法按預期工作。動畫div邊緣模糊使用

一個問題是沿移動div的所有邊緣模糊，尤其是前導和尾隨。當div快速移動時會發生模糊。這是正常的和不可避免的？在玩別人編寫的代碼時，我看到了同樣的問題，因爲這可能只意味着我們都犯了同樣的錯誤。我想渲染清晰的圖像，而不是模糊的圖像。我希望作爲動畫新手，我正在犯一個很容易解決的非常愚蠢的錯誤。

另一個問題是沿着移動div的尾部邊緣偶爾出現眨眼效果。它們不會發生在每一幀。基於Chrome時間軸，幀速率很好。我不知道什麼時候造成這種情況。

示例代碼無處不在，但大小適用於桌面。

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=windows-1252"> 
    <style> 
     .testAnim { 
      background: red; 
      height: 100px; 
      width: 100px; 
      position: absolute; 
     } 
    </style> 
</head> 
<body width="100%" height="100%" > 
    <div id="testAnim1" class="testAnim"></div> 

    <script> 

     window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 

     var movers = document.querySelectorAll('.testAnim'); 
     for(var m = 0; m < movers.length; m++) { 
      movers[m].posX = 20; 
      movers[m].posY = 10; 
      movers[m].deltaX = 20; 
      movers[m].deltaY = 0; 
     }; 

     function update(timestamp) { 

      for(var m = 0; m < movers.length; m++) { 

     if (((movers[m].posX + 5 + movers[m].deltaX) > 1200) || 
      ((movers[m].posX - 5 + movers[m].deltaX) < 0)) { 
     movers[m].deltaX *= -1; 
     }; 
     if (((movers[m].posY + 5 + movers[m].deltaY) > 500) || 
      ((movers[m].posY - 5 + movers[m].deltaY) < 0)) { 
     movers[m].deltaY *= -1; 
     }; 
     movers[m].posX += movers[m].deltaX; 
     movers[m].posY += movers[m].deltaY;  

     movers[m].style.left = movers[m].posX + 'px'; 
     movers[m].style.top = movers[m].posY + 'px'; 
     //movers[m].style.webkitTransform = "translate3d("+ movers[m].posX +"px, "+ movers[m].posY +"px, "+ 0 +"px)"; 
      }; 
      window.requestAnimationFrame(update); 
     }; 

     window.requestAnimationFrame(update); 
    </script> 
</body>

來源

2014-03-02 user3356715

發生這種情況的唯一原因是，如果顯示的更新速度比瀏覽器呈現的速度慢，或者缺少導致閃爍的vsync，則會發生這種情況。你試過不同的更快的機器嗎？使用此代碼我看不到任何模糊效果/尾隨效果。 – prabindh

沒有回答被發現。鑑於移動html div的糟糕表現，這個問題比實際更具學術性。

來源

2014-03-14 16:59:42 user3356715

動畫div邊緣模糊使用

回答

相關問題