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

Why is animation jittery/choppy at long duration?

本文关键字：断断续续 抖动 长时间 动画 为什么      更新时间：2023-09-26

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

如何解决此问题，还是应该只使用另一个用于 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>

在代码笔上查看

多亏了@showdev，用translateX替换左和顶部，翻译Y就成功了。

法典：

$(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>

在代码笔上查看

相关文章：