强制 Android 浏览器每秒重绘一次答案

【问题标题】：Force Android browser to redraw every second强制 Android 浏览器每秒重绘一次
【发布时间】：2012-01-11 04:25:00
【问题描述】：

我正在使用 -webkit-transform: translate(-958px, 0); 动画移动一个很长的图像

图像在开始水平移动后很快就被切断了，但是如果我稍微移动平板电脑屏幕，它会重新绘制屏幕并在平移时显示整个图像，也非常流畅。

但是如何在代码中模拟呢？

【问题讨论】：

标签： javascript css android-browser

【解决方案1】：

一些建议：

提供平板型号和安卓版本可能有帮助
jsfiddle/jsbin 上的图像尺寸和大小、动画持续时间或演示页面等信息将有很大帮助

回到问题：

在性能方面，使用translate3d会获得更好的性能，因为它不起作用，主要瓶颈在别处。
根据我使用移动 webkit 的经验，当图像很大时（在大小或尺寸方面），您可能会遇到问题：
- 内存问题
- 高网络延迟
- 足够长的加载和渲染时间

如果您的 UI 触发的重绘会平滑所有内容，则延迟可能是由图像加载和渲染

造成的

解决方案：

通过animation-delay 或setTimeout 为您的动画设置合理的延迟
更精确：预加载图片，完成后通过监听 onload 事件触发动画：jQuery .load explanation on image load event behaviour
如果上述方法不适合您，请尝试：Force-redraw DOM technique for WebKit-based browsers

对于 2 & 3，代码如下：

$("&lt;img&gt;")
.attr({ src: " /* image url */ " })
.load(function(){
    /* i. use class or animationName to set animation */
    /* ii. force redraw go there if needed */

    /* wrap i & ii into a setTimeout function inside this callback
    if more delay is needed */
})

祝你好运。

【讨论】：

谢谢，这有帮助。我最终将图像水平堆叠，然后将它们移动到第一个翻译规则上的正确位置，这似乎可以修复它。

【解决方案2】：

Paul Irish 的这段小代码和博客文章可能对您有所帮助：

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

如果它漂浮在你的船上，它几乎是跨浏览器。

【讨论】：

示例动画在平板电脑上很慢，我看不出这对我的 CSS3 动画有什么帮助/帮助。
虽然确切的实现可能无济于事，但总体思路应该是，其余的帖子和资源。

【解决方案3】：

如果我没有正确阅读您的问题，请原谅我。

您是否打算使用平板电脑的陀螺仪来平移大图像？这在代码中应该是可能的。

但是，据我所知，强制过渡以更快地更新是开发人员无法控制的。您能做的最好的事情就是确保平板电脑不必担心这些。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                padding:0px;
                overflow:hidden;
            }
            #img {
                position:absolute;
                left:0px;
                top:20px;
                -webkit-transition:left 0.5s;
            }
            </style>
    </head>
    <body>
        <img id="img" src="img.png" />
    </body>
    <script>
        function onOrientationChange(e) {
            var img = document.getElementById("img"); 
            var maxWidth = img.clientWidth - document.body.clientWidth;

            img.style.left = ((e.gamma-90) * maxWidth / 180 ) + "px";
        }
        window.addEventListener('deviceorientation', function(e){onOrientationChange(e)}, true);
        </script>
</html>

【讨论】：

【解决方案4】：

您尝试过使用 translate 3d 吗？ GPU 在使用时启动。

HTML5 App/Animation Performance

【讨论】：

Pure translate 似乎也在使用 GPU，因为我尝试使用 3d 但它并没有改变任何东西。