图像动画不平滑

图像的实际大小为140 x 198。你正在把它缩小和扩大到不同的尺寸。由于光栅图像的工作方式，这会导致模糊和/或失真。使用更大的源图像、更高的DPI，或者不要将其扩展到源图像的基本大小之外。

否则，任何javascript动画的感知"平滑度"都非常依赖于客户端计算机的资源。如果你的浏览器线程内存不足（Firefox+Firebug在工作几个小时后可能会膨胀到1gb的常驻RAM消耗！），或者如果你的系统没有很多可用资源可以启动，动画可能会不稳定，屏幕渲染可能会很慢或出现故障。

除了缩放造成的失真之外，你的动画在我自己的电脑上运行得很顺利（我有很多资源可以使用：p）

文档

• 维基百科上的光栅图形-http://en.wikipedia.org/wiki/Raster_graphics

将黑卡缩小到所需尺寸。你正在处理一个600像素宽的原稿，并将其缩小到75像素宽；这就是失真的原因。

我的猜测是浏览器不会对黑卡进行反别名，因为它不在视图中。在动画过程中，浏览器会快速更新蓝卡的位置和比例。作为一种性能衡量标准，抗锯齿可能会被推迟，直到浏览器有足够的空间来呼吸，超过严格的setTimeout循环所提供的空间。