Javascript 动画不流畅
Javascript animations jerky
我试过使用 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
谢谢!
您应该使用 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
我试过使用 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
谢谢!
您应该使用 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