动画使用JavaScript DIV呈现在Chrome文物(Animating a DIV with

作为一个实验，我试图复制在JavaScript AS3的雪碧功能，而不使用Canvas对象。 我认为，使用绝对定位的div和操纵他们的CSS属性是没有道理的，但是在Chrome动画引入怪异的假象（因为看似重绘问题）。

我找不到什么，我做错了什么？ 该代码是，其实很简单。 下面是我想这并没有帮助的一些要点：

• 使用相对定位的div（而不是绝对位置。）
• 使用边缘（相对于顶部和left属性。）
• 直接附加对象体（相对于附加到一个容器的div。）
• 使用的setTimeout（而不是requestAnimationFrame）

：你可以在这里看到一个简化的小提琴http://jsfiddle.net/BVJYJ/2/

编辑： http://jsfiddle.net/BVJYJ/4/

在这里，你可以看到我的浏览器的假象：

这可能是我设置的一个错误（Windows 7的64位，铬21.0.1180.75）。 没有其他的浏览器出现此行为。 我会非常感激，如果有人能在我所能够做的错误的评论。 我更好奇背后的原因，而不是BTW一种解决方法。 这就是说，每一个解释是值得欢迎的。 :)

编辑：有没有在示例代码导致在使用，即使我是用RAF的印象setTimeout的一个bug。 requestAnimationFrame解决了基本的转型问题，但问题仍然与CSS变换，如旋转。

Answer 1:

我有同样的问题与我liteAccordion插件。 它可以通过背面的可见性设置为隐藏你的动画元素上是固定的，你可以在这里看到： http://jsfiddle.net/ZPQBp/1/

Answer 2:

有研究表明， setTimeout可能会由于各种原因的问题。 你真的应该使用requestAnimationFrame ：

计时器没有精确到毫秒。 下面是一些常用的计时器决议1 ：

• Internet Explorer 8和更早具有15.625ms的计时器分辨率
• Internet Explorer 9中，后来有4毫秒的计时器分辨率。 火狐
• 和Safari有10毫秒〜的计时器的分辨率。
• Chrome提供了4毫秒的计时器分辨率。

Internet Explorer的前9版本具有15.625毫秒的计时分辨率1 ，所以0和15之间的任意值可以是0或15，但没有别的。 Internet Explorer 9的提高计时器的分辨率4毫秒，但是这仍然不是很具体，当涉及到动画。

Chrome的定时分辨率为4ms，而Firefox和Safari的为10ms。 所以，即使您将获得最佳的显示间隔，你仍然只获得了接近你想要的时间。

参考： http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/

也

setTimeout不考虑还有什么是在浏览器中发生的事情。 该页面可能选项卡来隐藏，占用你的CPU时，它并不需要，或者动画本身可能已经滚出使得更新调用再次不必要的页面。 Chrome并油门的setInterval和setTimeout的在隐藏标签1fps，但这并不是在所有浏览器的依据。

其次， setTimeout时候想，而不是当计算机只能够更新屏幕。 这意味着你可怜的浏览器有玩弄重绘动画，同时重绘整个屏幕，如果你的动画帧速率是不符合你的屏幕重绘同步，可能需要更多的处理能力。 这意味着更高的CPU使用率和计算机的风扇踢，或排水您的移动设备上的电池。 萨科Zakas做了出色的工作，解释的影响计时器的分辨率有一个相关的动画文章 。

参考： http://creativejs.com/resources/requestanimationframe/

Answer 3:

它是与子像素定位 。 如果四舍五入到最接近像素，你不会看到这些渲染错误：

thisRef.block.style.left = Math.round((x + (mouseX - ox - x) * .125)) + "px";
thisRef.block.style.top = Math.round((y + (mouseY - oy - y) * .125)) + "px";

文章来源: Animating a DIV with JavaScript renders artifacts on Chrome