我尝试过使用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);
}
});
}
这是我的傻瓜:circular movement
谢谢!
答案 0 :(得分:5)
您应该使用left
和top
,而不是使用translateX
和translateY
来制作动画。这不仅会使用硬件加速,还应该激活子像素移动。
您还应该确保将数字四舍五入到小数点后四位。
jsfiddle - demo (一个div
与left
/ top
另一个translateX
/ translateY
)
Paul Irish: Why Moving Elements With Translate() Is Better Than Pos:abs Top/left