为什么动画会长时间抖动/波涛汹涌？ [英] Why is animation jittery/choppy at long duration?

问题描述

当我使用velocity.js在15秒内向左侧90px和90px向下动画时，动画有点紧张。

When I animate a box just 90px to left and 90px down in 15 seconds using velocity.js, the animation is a bit jittery.

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

How can I fix this problem, or should I just use another animation library for 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>

在Codepen上查看

推荐答案

感谢@showdev，用translateX替换left和top，并且translateY做了这个伎俩。

Thanks to @showdev, replacing left and top with translateX and translateY did the trick.

代码：

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

在Codepen上查看

这篇关于为什么动画会长时间抖动/波涛汹涌？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！