使用animationFrame的抖动动画

Question

我根据Windows 8加载动画制作了一个简单的小微调器小部件，我无法弄清楚为什么每个点看起来都会略微抖动。我已经尝试了各种各样的事情来规范化这些值，并且没有找到任何能够使其平滑的东西。

http://jsbin.com/ilafov/16

我做错了什么？

Answer 1

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

要使动画真正流畅，要按像素移动像素，您不要只是从一个像素跳到另一个像素，您可以想象它会按平均值移动。像素缓慢移出一个空间并进入下一个空间。您可以通过逐渐淡出的像素来模拟这个，因为其他像素逐渐消失。

当我屏幕截图动画时，我看到所有的点都没有子像素动画的迹象。

如果您查看我的商家页面：http://matthewrconsultancy.co.uk/start，如果您使用Chrome等内容，您会看到齿轮移动。它使用SVG和SMIL动画，但是你会看到它是否放大了动画在子像素级别上发生的情况。我恐怕我没有时间弄清楚如何解决它，但我可以直接回答你的主要问题是什么问题。

Answer 2

一些选项：

1）尝试使用画布为圆圈设置动画。在初始化期间，您可以将一个圆绘制到离屏画布并将其imageData（使用getImageData）保存到易于访问的变量中。在动画的每个帧中，使用putImageData作为主动画画布上各自坐标中的圆圈。请记住每一个新框架清除它。

2）将您的圆圈保存为独立于分辨率的图像（SVG，CSS样式或带有API的Canvas，根据用户的屏幕DPI和浏览器自己的像素显示更新其上下文）。然后，您可以尝试使用transform：translate3d（x，y，z）移动圆圈。这可能会提供更平滑的结果，但我听说此转换启用的硬件加速确实会阻止浏览器对某些元素使用子像素消除锯齿。还要记住，transform属性使用供应商前缀。

希望这有帮助！