Javascript动画生涩答案

【问题标题】：Javascript animations jerkyJavascript动画生涩
【发布时间】：2015-03-03 22:56:49
【问题描述】：

我尝试使用 jQuery 的 .animate 和 velocity.js 来执行圆周运动。然而，无论我做什么，动画都是生涩的——你可以看到元素捕捉到像素网格；例如，您可以看到元素向右移动一个像素，然后向下移动一个像素。是什么导致了这个问题？是否有可能使动画流畅，也许通过使用一些第三方插件或某种插值？

这是我的移动代码：

function animateElement(element) {
    var xPos = parentCenter.x + Math.cos(angle) * radius;
    var yPos = parentCenter.y + Math.sin(angle) * radius;

    $.Velocity(element,
        {top: xPos , left: yPos },
        {duration: animationTime, easing:"linear",
            complete: function () {
                animateElement(element);
            }
    });
}

这是我的 jsfiddle：circular movement

谢谢！

【问题讨论】：

查看此网站并观看有关动画的 youtube 视频，我认为这会有所帮助：aerotwist.com/blog/flip-your-animations
这不完全是一个答案，所以我将它作为评论发布。如果您将所有 1000 毫秒的持续时间更改为 200 左右，它仍然很容易阅读并且移动速度更快，这使得它不会显示为“jerk-y”。只是一些想法..

标签： javascript jquery css animation velocity.js

【解决方案1】：

您应该使用translateX 和translateY，而不是使用left 和top 来制作动画。这不仅会使用硬件加速，还应该激活亚像素移动。

您还应该确保将数字四舍五入到四位小数。

jsfiddle - demo（一个div与left/top另一个与translateX/translateY）

Paul Irish: Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

【讨论】：

哇，这太棒了！非常感谢！