Question

对不起，英语不好。
这是link个站点。
我的任务是创建没有滚动的网站。当用户单击屏幕的右侧部分时，汽车开始向前移动。当它到达屏幕中间时，汽车停下来，固定的内容块开始朝相反的方向移动。如果用户将光标移到屏幕左侧（按住鼠标按钮的同时），则汽车应向后移动。
桌面版本按预期工作。但是移动版本很慢。（不是很慢，它不像台式机那么光滑我想）
我该怎么解决这个问题？

在touchstart事件上，我获得event.pageX值以检查用户触摸了屏幕的哪一部分。（这样我就知道汽车应该向哪个方向移动）并将此值存储在变量“ mousePos”中。然后我用运动函数调用setInterval
在touchend事件中，我清除了间隔以阻止汽车行驶。
在touchmove上，我将使用新的event.pageX值重写“ mousePos”变量。例如：用户单击，汽车开始移动，如果用户将光标向左移动，我将使用此变量来检查方向并向后转。
在mouseMove功能中，我将检查汽车位置并决定应采取的措施-移动汽车或移动背景，然后我将检查其是否达到终点

事件：

    $(document).on('mousedown touchstart', '.mouse-click', function(event){
        clicking = true;
        mousePos = event.pageX;

        if ( event.target.className == 'helper' ) {
            showModal();
        } else {
            moveStuff = setInterval(mouseMove, 1);
        }
    });

    $(document).on('mouseup touchend', function(){
        clicking = false;
        carLights.removeClass('blink');
        clearInterval(moveStuff);
    })

    $(document).on('mousemove touchmove', '.mouse-click', function(event){
        if(clicking == false) {
            return;
        } else {
            mousePos = event.pageX;
        }
    });

功能：

    function mouseMove() {
        let offset = parseInt( mainContent.css('left') );
        let offsetCar = parseInt( car.css('left') );
        if ( mousePos > middleScreen ) {
            carLights.removeClass('blink');
            if ( offset < - ( contentWidth ) ) {
                return;
            } else {
                rotateWheelsForward();
                if ( offsetCar < middleScreen ) {
                    car.css('left', (offsetCar + mouseSpeed) + 'px');
                } else {
                    mainContent.css('left', (offset - mouseSpeed) + 'px');
                }
            }
        } else if ( mousePos < middleScreen ) {
            carLights.addClass('blink');
            if ( offset > 0 ) {
                carLights.removeClass('blink');
                return;
            } else {
                rotateWheelsBackward();
                if ( offsetCar > minCarLeft ) {
                    car.css('left', (offsetCar - mouseSpeed) + 'px');
                } else {
                    mainContent.css('left', (offset + mouseSpeed) + 'px');
                }
            }
        }
    }

那么我该如何在移动设备中使运动更流畅？（我使用iphone 5s野生动物园，但在iphone 6中进行了测试，但效果仍然很差）我应该对此代码进行哪些更改？

Answer 1

我建议使用变换而不是位置，例如：左，顶部，这实际上影响了层的重涂。（明智地）使用requestAnimationFrame执行平滑的事件动画，例如滚动，鼠标上移或任何其他事件。

然后使用will-change: transform;来表示将来会“转换”的元素。这将创建一个新层，并为以后的元素更改做准备。

就我而言，相对位置会影响重排或渲染工具镶边上的绿色闪烁。所以我更喜欢使用固定/绝对位置来防止这种情况。

这里有一些很棒的文章供您获取Leaner, Meaner, Faster Animations with requestAnimationFrame以及to achieving 60 fps animations with css的方式

希望获得帮助；）

如何使jQuery setinterval在移动中更流畅？

1 个答案: