使用 Jquery.animate 平滑 requestAnimationFrame？答案

【问题标题】：Smooth requestAnimationFrame using Jquery.animate?使用 Jquery.animate 平滑 requestAnimationFrame？
【发布时间】：2016-03-22 05:47:07
【问题描述】：

我正在尝试使用 requestAnimationFrame 和 Jquery 的 animate() 将 div 反复向右移动。但是，我的 div 似乎口吃而不是连续移动。怎么老是起停？

Here is a JSfiddle of my implementation

如果你只想看我的代码，这里是 html：

<body>
  <div id="back">
    <div id="myDiv">
    </div> 
  </div>
</body>

CSS：

#myDiv {
  height: 50px;
  width: 50px;
  background-color: black;
  position: absolute;
}

#back {
  height: 200px;
  width: 200px;
  background-color: teal;
}

还有 javascript：

  function updateFrame(){
      $("#myDiv").animate({left: '+=25px'}, function(){
        window.requestAnimationFrame(updateFrame);
      });
    }


  updateFrame();

【问题讨论】：

为什么要将.animate() 与rAF 结合起来？仅使用 .animate() 方法是否有问题？
如果我想在动画帧上制作的不仅仅是那个 div 怎么办？
嗯，在我看来，这仍然不是一个很好的组合。 $('#myDIV') 当前返回一个元素。您可以传递一个类选择器（或不传递什么），并让多个元素动画化。
但是说我想以某种方式为一件事制作动画，以另一种方式制作另一件事
我可能是错的，但我认为您对.animate() 方法和rAF 的理解有点偏离。不要误会我的意思，但是由于rAF，几乎每秒调用60 次.animate() 方法不应该是这样。您可以改用 .css() 方法代替 .animate() 并仍然获得类似的结果：jsFiddle。

标签： javascript jquery html jquery-animate

【解决方案1】：

试试这个：

  function updateFrame(){
      $("#myDiv").animate({left: '+=1px'}, 10, function(){
        window.requestAnimationFrame(updateFrame);
      });
    }


  updateFrame();

使用left: 1px 代替25px 然后使用动画speed。

jsFiddle

【讨论】：