Question

我正在制作一个html5＆＃34;网络游戏风格＆＃34;我的背景宽度大到7600px左右。使用css background-size：100％100％在具有400vw宽度的div中设置背景。我试图使用requestAnimationFrame循环中的window.scrollBy函数滚动该背景。在页面自动滚动背景时，Ramdomly得到了图形化的gliches，但是渲染时间线（Chrome）在绘画中显示的时间少于2ms。

dpl = -window.innerWidth*duration;
    if(next != null){
        function move(){
            if(window.pageXOffset > next.x){
                window.scrollBy(dpl,0);
                window.requestAnimationFrame(move);
            }else{
                window.scrollTo(next.x,next.y);
                actual = next;
                next = null;
            }
        };
        move();
            //Interval callback
            /*interval = setInterval(function(){
            if(window.pageXOffset > next.x){
                window.scrollBy(dpl,0);
            }else{
                window.scrollTo(next.x,next.y);
                actual = next;
                next = null;
                clearInterval(interval);
            }
        },scrollInterval);*/
    }

我也尝试更改scrollBy函数并使用css转换和转换触发更改更改translate3d属性的元素的类以尝试强制gpu ...同样的结果......

.camLeft{
-ms-transform: translate3d(0,-100%,0) !important; 
 -webkit-transform: translate3d(0,-100%,0) !important;
transform: translate3d(0,-100%,0) !important;
}

并使用：

$(".btnLeft").click(function(){
   $("#background").toggleClass("camLeft");
});

另一个尝试是使用画布..再次使用requestAnimationFrame循环并滚动背景清除画布每一帧并重新绘制背景..（画布在这里得到100％/ 100％和图像400％/ 100％设置为窗口加载）...同样的结果。绘画时间少于2毫秒，有时4-5毫秒，但随机图形化。

我不知道还能做什么，除了尝试通过瓷砖或骰子制作背景将会有很多工作。当背景移动时，屏幕的大部分区域变得“da da”。所以通过tile dunno来制作它，如果它是解决方案cuz，同时滚动很多瓷砖需要移动。

注意：背景是在svg中制作的，也尝试了png，它会产生更多的gliches。它是一个基本的地板背景单色，有很多曲线，如2D平台游戏

非常感谢您的帮助。

HTML5滚动背景

0 个答案: