Как сделать jquery setinterval движение в мобильном телефоне более плавным? - PullRequest
Новая
       12

Как сделать jquery setinterval движение в мобильном телефоне более плавным?

1 голос
/ 08 апреля 2019

Извините за плохой английский.
Вот ссылка на сайт.
Моя задача - создать сайт без прокрутки.Когда пользователь нажимает на правую часть экрана, автомобиль начинает двигаться вперед.Когда он достигает середины экрана - машина останавливается, и фиксированный блок контента начинает двигаться в противоположном направлении.если пользователь перемещает курсор в левую часть экрана (удерживая кнопку мыши нажатой), автомобиль должен двигаться назад.
Настольная версия работает как положено.Но мобильная версия работает медленно.(это не совсем медленно, это не так гладко, как на рабочем столе я думаю)
Что я могу сделать, чтобы решить эту проблему?

  1. При событии сенсорного запуска я получаю значение event.pageXчтобы проверить, к какой части экрана прикоснулся пользователь.(чтобы я знал, в каком направлении должен двигаться автомобиль) и сохраню это значение в переменной "mousePos".Затем я вызываю setInterval с функцией движения
  2. При событии касания я очищаю интервал, чтобы остановить движение автомобиля.
  3. При касании я перезаписываю "mousePos" var с новым значением event.pageX.Например: пользователь нажал, машина начинает двигаться, если пользователь переместил курсор влево, я буду использовать эту переменную, чтобы проверить направление и повернуть автомобиль назад.
  4. В функции 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 safari, но протестирован в iphone 6, все еще работает плохо)
Какие изменения я должен внести в этот код?

1 Ответ

2 голосов
/ 08 апреля 2019

Я предлагаю использовать преобразование, а не положение, например: слева, верхняя причина, которая действительно влияет на перекраску-перерисовку слоя. Используйте requestAnimationFrame (мудро) для выполнения плавной анимации событий, таких как прокрутка, mouseup или любое другое событие.

Затем используйте will-change: transform; для элемента, который будет «преобразован» в будущем. Это создаст новый слой и подготовится к изменениям элемента позже.

В моем случае, относительное положение влияет на оплавление или зеленую вспышку на инструменте рендеринга хром. Поэтому я предпочитаю использовать фиксированную / абсолютную позицию, чтобы предотвратить это.

Вот отличная статья, в которой вы можете получить Leaner, Meaner, Faster Animations с requestAnimationFrame и как добиться анимации 60 кадров в секунду с помощью css

Надеюсь, это поможет;)

...