Javascript动画生涩

Question

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

谢谢!

Answer 1

你应该使用和,而不是使用left和top你的动画.这不仅会使用硬件加速,还应该激活子像素移动.translateXtranslateY

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

jsfiddle - demo(一个div与left/ top另一个translateX/ translateY)

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