为什么动画长时间抖动/断断续续？答案

【问题标题】：Why is animation jittery/choppy at long duration?为什么动画长时间抖动/断断续续？
【发布时间】：2016-01-28 20:10:58
【问题描述】：

当我使用velocity.js 在15 秒内为一个向左90px 和向下90px 的框设置动画时，动画有点抖动。

我该如何解决这个问题，或者我应该为 JS 使用另一个动画库？

$(function() {
  $("#box").velocity({
    top: 90,
    left: 90
  }, {
    duration: 15000,
    easing: 'ease-in-out'
  });
});

#box {
  color: white;
  background-color: black;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.ui.min.js"></script>
<div id="box">box</div>

View on Codepen

【问题讨论】：

我想你的意思可能是“紧张”。似乎没有足够的分辨率使动画在那个速度下更加流畅。每秒移动一个像素时，可以看到框跳动。
是的，我的意思是紧张不安。我可以解决这个抖动吗？
Why are slow jQuery animations choppy?的可能重复
哦，酷。哇，这似乎有帮助。您可以考虑发布您自己问题的答案，并附上您如何解决问题的示例，以便未来的编码人员可以从您的解决方案中受益。
更多参考请看Paul Irish和Chris Coyier的相关文章。

标签： javascript jquery animation velocity.js

【解决方案1】：

感谢@showdev，用 translateX 和 translateY 替换 left 和 top 成功了。

代码：

$(function() {
  $("#box").velocity({
    translateY: 90,
    translateX: 90
  }, {
    duration: 15000,
    easing: 'ease-in-out'
  });
});

#box {
  color: white;
  background-color: black;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.ui.min.js"></script>
<div id="box">box</div>

View on Codepen

【讨论】：