Smooth requestAnimationFrame using Jquery.animate?

Smooth requestAnimationFrame using Jquery.animate?

本文关键字：animate Jquery using requestAnimationFrame Smooth      更新时间：2023-09-26

我试图使用 requestAnimationFrame 和 Jquery 的animate()反复将div 向右移动。然而，我的div 似乎结结巴巴而不是不断移动。为什么它总是开始和停止？

这是我实现的 JSfiddle

如果你想只看我的代码，这里是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();

试试这个： 

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

  updateFrame();
使用

left: 1px 而不是 25px 然后使用 动画speed 。

js小提琴

相关文章：