为什么[我的] CSS3/jQuery过渡不平滑，我该如何让它们更平滑？

尽管我在互联网上搜索有关这方面的信息，但我找不到关于它的任何东西，所以我来这里寻求帮助。为什么[我的] CSS3/jQuery过渡不平滑，我该如何让它们更平滑？

所以这里有一个项目，我已经工作的精华版本：

http://sachasayan.com/test/index.html（查看在WebKit浏览器，请有没有时间，使其FF-友好。）

还有什么让我烦恼：无论我使用哪种方法 - jQuery .animate或css3过渡，[我的]动画看起来都不太平滑。我不明白他们为什么首先出现这种方式，而且非常微妙，我最终不得不做一些视频上限来证明它。但它绝对存在 - 动画是突出的。有时框架发生得太快，有时太慢。

翻转它来回六七次，你会希望看到我在说什么。

我可以理解这与jQuery - JS执行不完美。快速剖析表明，确实，使用jQuery anim时，某些帧会被触发得太快，并且某些帧会迟到。但与CSS3？

人们做什么来解决这个问题？

来源

2012-01-07 WittyBanter

如果它只能在Webkit上运行这种简单类型的动画，那么代码中存在一个错误。 – powtac 2012-01-07 02:24:18

该动画在其他浏览器上运行良好 - 这是我没有专门迎合FF的触发。在你做这种快速判断之前，我会问你实际看代码（动画函数只有几行）。 – WittyBanter 2012-01-07 03:14:39

网页的性能完全取决于您使用的浏览器，其版本，您使用的机器以及同时运行的内容。我同意@powtac，必须有一个错误，或者它只是你的代码没有优化。尝试研究DOM操作如何影响性能，浏览器的JS基准，并尝试研究浏览器本身以及它们的能力。 – Joseph 2012-01-07 04:13:08

设置你的代码之前这个JS：

jQuery.fx.interval = 100;

来源

2012-01-07 02:21:31 powtac

我试过了 - 还有，这两个都不是帧速率问题（这是一个一致性问题 - 尽管帧速率的增加可以减少对一致性问题的理解，但是我发现它并不能真正帮助解决这个问题）由于某种原因）也不仅仅是一个jQuery问题。 – WittyBanter 2012-01-07 02:39:09

你有没有读过关于动画DOM的许多建议？ – powtac 2012-01-07 02:43:32

这是我的一个小项目的原型，并与你相似：

http://www.megaupload.com/?d=U77EATKF

我正在使用jQuery的“margin-left”CSS属性和.animate来移动容器，并且非常流畅。使用箭头键使用它（左和右）

该项目的当前版本其现在充满图像，文本，iframe并仍然平滑。

祝你好运。

来源

2012-01-07 03:58:14

因此，这有助于稍微，但只是因为你使用EaseInOutExpo，这有点掩盖了效果。使用像默认摆动或EaseInOutQuart（我的偏好）这样的功能，并且在任何合理的“平均”机器上这些缺陷都更明显。 – WittyBanter 2012-01-10 05:59:42

我在两台机器上进行了测试，当切换到EaseInOutQuart时，我看到了与您的代码相同的效果 - 动画不是非常流畅，虽然它们令人满意，但它们并不完美*。我确信我已经看到了可以解决这个问题的网站，而不需要采用快速移动技巧。那么他们如何做到这一点？ – WittyBanter 2012-01-10 06:05:58

告诉我一个人的网址，我会告诉你。 – 2012-01-10 06:34:15

为什么[我的] CSS3/jQuery过渡不平滑，我该如何让它们更平滑？

回答

相关问题