Question

我正在学习使用div，javascript和requestAnimationFrame创建一个简单的动画。动画正在运行，但有一些看似不正确的视觉问题。虽然我主要使用Chrome，但问题出现在多个浏览器中。我用最少的代码创建了一个示例来演示问题。我知道css动画，webGl等存在并且可能是优越的，但是想要理解为什么这个代码不能按预期工作。

一个问题是沿着移动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>

Answer 1

未找到答案。鉴于移动html div的可怕表现，这个问题更具学术性而非实际性。

使用时动画div上的模糊边缘

1 个答案: