Javascript动画不稳定

Javascript animations jerky

本文关键字：不稳定 动画 Javascript      更新时间：2023-09-26

我尝试过使用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：圆形机芯

谢谢！

动画不应使用left和top，而应使用translateX和translateY。这不仅将使用硬件加速，而且应该激活子像素移动。

你还应该确保把数字四舍五入到四位小数。

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

Paul Irish：为什么用Translate（）移动元素比Pos更好：abs顶部/左侧

相关文章：