-1

我正在学习使用 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>

4

1 回答 1

0

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

于 2014-03-14T16:59:42.057 回答