动画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边缘模糊使用

回答

相关问题