8

我正在尝试在 Android WebView 中使用 CSS3 动画，但在启动动画时出现了非常烦人的延迟（大约 500 毫秒）。

动画运行流畅，没有延迟，但开始时有延迟。由于没有滞后，我认为这不是性能问题。或者它可能是？

这不是默认的 300 毫秒 onclick 延迟，我已经更改为 ontouchstart 并且当我执行动画/过渡以外的任何操作时，没有延迟。只有这两个。

它也不是动画延迟属性，我已经将它设置为 0。

任何可能的解释/解决方案？

PS：我试图运行的动画/过渡是带有transform: translateX()属性的。之前，我尝试使用left: Xpx，但在动画过程中出现了滞后。使用变换，没有滞后，但有延迟。

4

3 回答 3

4

我有同样的问题，未能找到合理的解决方案。我尝试了不同的方法，这些是我的结论：

  • 使动画更长使其看起来更流畅，但不会减少开始时的延迟
  • 关闭硬件加速使动画更快（延迟也减少），但一些帧被丢弃并且动画不再流畅
  • 全部更改translate3d为translateX// translateY-translateZ没有视觉差异
  • 将动画更改为通过 JavaScript (transitionEnd事件) 控制的多个过渡会使其变慢，并在途中出现多个打嗝（每次transitionEnd被触发时）。

我的猜测是 CSS 动画在 Android 上很慢，需要一些预计算才能显示出来；因此一开始的延迟。我们可能需要等待 Chrome 成为 Android 的默认浏览器。

于 2013-06-17T07:35:14.903 回答
0

我在股票浏览器上遇到了同样的问题。事实证明，您可以将其添加到您正在制作动画的块中：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

这应该使动画平滑，使它们更快地开始，并消除动画前后的闪烁。

于 2014-08-29T00:55:02.540 回答
0

我不确定它是否有助于延迟，但也许您应该使用translate3d(x,0,0)而不是translateX，因为 3D 转换在硬件上运行。

我现在找不到这方面的参考资料，但我记得在 Google Android HTML Developers 网站上读过一篇关于它的文章。

于 2013-05-16T18:51:53.663 回答