I whipped up a simple little spinner widget based on the Windows 8 loading animation, and I haven't been able to figure out why each dot appears to jitter slightly. I've tried various things to normalize the values and haven't found anything that has smoothed it out.
What am I doing wrong?
我有一种预感，并确定了屏幕截图。您的动画似乎没有做任何亚像素动画。
为了让动画真正流畅，逐个像素地移动，你不只是从一个跳到另一个，你想象它按平均移动。像素慢慢地移出一个空间并进入下一个空间。您可以通过像素在另一个淡入时逐渐淡出来模拟这一点。
当我对您的动画进行屏幕截图时，我看到所有点都没有亚像素动画的迹象。
如果您查看我的业务页面：http : //matthewrconsultancy.co.uk/start，如果您使用 Chrome 之类的东西，您会看到齿轮在移动。它使用 SVG 和 SMIL 动画，但是如果您放大它，您会发现动画是在亚像素级别上发生的。恐怕我还没有时间弄清楚如何为您解决它，但我可以直接回答您的主要问题，即出了什么问题。
一些选项：
1）尝试使用画布为圆圈设置动画。在初始化期间，您可以在屏幕外画布上绘制一个圆圈并将其 imageData（使用 getImageData）保存到一个易于访问的变量中。在动画的每一帧中，将 putImageData 用于您在主动画画布上各自坐标中的尽可能多的圆圈。请记住在每个新帧中清除它。
2) 将您的圆圈保存为与分辨率无关的图像（SVG、CSS 样式或带有 API 的画布，该 API 根据用户的屏幕 DPI 和浏览器自己的像素显示来更新其上下文）。然后，您可以尝试使用 transform: translate3d(x, y, z) 移动圆。这可能会提供更平滑的结果，尽管我听说此转换启用的硬件加速确实会阻止浏览器在某些元素上使用亚像素抗锯齿。还要记住，转换属性使用供应商前缀。
希望这可以帮助！