Javascript 使用animationFrame的抖动动画

我在Windows8加载动画的基础上设计了一个简单的微调器小部件，但我还没有弄清楚为什么每个点都会出现轻微的抖动。我尝试了各种方法来规范化这些值，但没有找到任何可以使其平滑的方法

---

我做错了什么？

我有预感，肯定会被拍屏幕。您的动画似乎不会执行任何子像素动画

要使动画真正平滑，一个像素一个像素地移动，你不只是从一个跳到另一个，你可以想象它以平均值移动。像素缓慢地从一个空间移动到下一个空间。您可以通过像素逐渐淡出而另一个逐渐淡入来模拟这一点

当我在屏幕上拍摄你的动画时，我看到了所有没有亚像素动画迹象的点

如果你看我的商业页面：如果你使用Chrome之类的东西，你会看到齿轮在移动。它使用SVG和SMIL动画，但如果您将其放大，就会看到动画是在亚像素级别上发生的。恐怕我现在还没有时间为您解决问题，但我可以直接回答您的主要问题，即问题出在哪里。

一些选项：

1） 尝试使用画布设置圆的动画。在初始化过程中，您可以在屏幕外的画布上画一个圆圈，并将其imageData（使用getImageData）保存到一个易于访问的变量中。在动画的每一帧中，将putImageData用于主动画画布上相应坐标中的尽可能多的圆。只要记得每换一帧都要清除它

2） 将圆另存为独立于分辨率的图像（SVG、CSS样式或画布，使用API根据用户的屏幕DPI和浏览器自身的像素显示更新其上下文）。然后可以尝试使用transform:translate3d（x，y，z）移动圆。这可能会提供更平滑的结果，尽管我听说此转换启用的硬件加速确实会阻止浏览器在某些元素上使用亚像素蚂蚁锯齿。还要记住，transform属性使用供应商前缀

---

希望这有帮助

好吧，我可能会推荐使用画布作为开始。我能说的最好的情况是，元素不支持亚像素渲染。动画未舍入到最近的像素。我还尝试使用

zoom

来强制它，但它仍然很紧张。