1

在计算机和 iPhone 上运行良好，但在 Galaxy S3 上，移动的块会留下随机清理的痕迹。我该如何解决？

http://curtastic.com/test7.html

踪迹每秒消失一次（按原样清除）。

在此处输入图像描述

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
    </head>
    <body style='margin:0;width:640px;'>
        <div id=fps></div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            var block;
            var angle=0;

            var fpsFrames = 0;
            var fpsTime = 0;

            function gameLoop() {
                var now = new Date();
                fpsFrames++;
                if (now - fpsTime >= 1000) {
                    $('#fps').html("FPS: "+fpsFrames);
                    fpsFrames = 0;
                    fpsTime = now;
                }

                block.x += 3;
                if (block.x >= $(window).width()-50) {
                    block.x = 0;
                }
                block.canvas.css('left', block.x);
                block.canvas.css('top', block.y);
            }

            $(document).ready(function() {
                $("body").append("<div id=block style='position:absolute;width:33px;height:33px;background:green' class=block></div>")
                block = [];
                block.canvas = $('#block');
                block.x = 0;
                block.y = 55;

                window.requestAnimFrame = (function(){
                  return  window.requestAnimationFrame       ||
                          window.webkitRequestAnimationFrame ||
                          window.mozRequestAnimationFrame    ||
                          function( callback ){
                            window.setTimeout(callback, 1000 / 60);
                          };
                })();


                (function animloop() {
                    requestAnimFrame(animloop);
                    gameLoop();
                })();

            });

        </script>
    </body>
</html>
4

2 回答 2

2

你被一部手机卡住了，它没有太多的处理能力来这么快地处理变化。

有两种方法：

  1. 增加您的回调时间（正如@Paul 指出的那样），window.setTimeut以便您和其他手机浏览器可以处理 javascript。如果这不可行。然后尝试第二个。

  2. 使用 DocumentFragment 添加元素（这将更有效）：如果您使用 DocumentFragment 添加元素，则不会导致导致闪烁的浏览器回流。

正如文件所说

由于文档片段在内存中而不是主 DOM 树的一部分，因此将子片段附加到它不会导致页面重排（计算元素的位置和几何形状）。因此，使用文档片段通常会带来更好的性能。

您还可以查看我对这个问题的回答，这有点相关。

希望有帮助:)

于 2013-08-15T04:20:16.093 回答
0

您是否尝试过使用 GPU 加速动画？它们应该会给你更好的结果，因为它们实际上与视频驱动程序的刷新率有关。使用 JavaScript 管理动画不会是您的最佳选择。另一个答案可能是正确的，大多数 Android 设备都有硬件缺陷，即使是 S3，所以你会遇到这样的问题。我有一个 Nexus 7，我在上面进行测试，与我的 iPad2 和 Windows 8 设备（平板电脑和手机）相比，它很多时候无法处理像这样的简单事情。

这可能是一篇证明差异的合理文章，http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

于 2013-08-16T12:08:59.713 回答