0

我尝试使用 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：圆周运动

谢谢！

4

1 回答 1

5

而不是使用leftandtop为你的动画你应该使用translateXand translateY。这不仅会使用硬件加速，而且应该激活亚像素运动。

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

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

Paul Irish：为什么使用 Translate() 移动元素比 Pos:abs 上/左更好

于 2015-03-03T14:51:35.577 回答