Как убрать лаги JS-анимации при свайпе по двум осям?
Всех приветствую!
Проблема в жестких лагах при перерисовке, когда пользователь свайпает элемент не ровно по оси Х, но добавляет скролл по Y. Суть проблемы на видео.
JS-функция, которая реализует перерисовку ниже. Некоторые коллбеки закоментировал, результата по производительности положительного нет.
function moveS () { var evt = getEvent(); var targetInput, targetInputW, left, right; targetInput = targetPrElem.getAttribute('classre'); targetInput == 'maxPrice' ? targetInputW = 'minPrice' : targetInputW = 'maxPrice'; left = priceSlide.querySelector('.leftM'); right = priceSlide.querySelector('.rightM'); leftM = parseInt(left.style.left); rightM = parseInt(right.style.left); if (rightM < leftM) { leftM = parseInt(right.style.left); rightM = parseInt(left.style.left); targetInput = targetInputW; } var newS = startS - (evt.clientX/widthSlide); var res = Math.ceil((offsetPrSl - newS)*100)/100; //slideLine (intoLine, left, right); if (res >= 0 && res < maxLeftSlide) { targetPrElem.style.left = (res*100)+'%'; //priceRe (targetInput, maxValForm*res); } else if (res == maxLeftSlide) { targetPrElem.style.left = (res*100)+'%'; //priceRe (targetInput, maxValForm); } else {return} } |
function moveS () { var evt = getEvent(); var targetInput, targetInputW, left, right; targetInput = targetPrElem.getAttribute('classre'); targetInput == 'maxPrice' ? targetInputW = 'minPrice' : targetInputW = 'maxPrice'; left = priceSlide.querySelector('.leftM'); right = priceSlide.querySelector('.rightM'); leftM = parseInt(left.style.left); rightM = parseInt(right.style.left); if (rightM < leftM) { leftM = parseInt(right.style.left); rightM = parseInt(left.style.left); targetInput = targetInputW; } var newS = startS - (evt.clientX/widthSlide); var res = Math.ceil((offsetPrSl - newS)*100)/100; //slideLine (intoLine, left, right); if (res >= 0 && res < maxLeftSlide) { targetPrElem.style.left = (res*100)+'%'; //priceRe (targetInput, maxValForm*res); } else if (res == maxLeftSlide) { targetPrElem.style.left = (res*100)+'%'; //priceRe (targetInput, maxValForm); } else {return} }
Проверил производительность через DevTools - смущает время, затраченное на анимацию, но посредством нескольких проверок установил, что это не влияет на лаги.
Есть какие-то соображения по реализации аналогичного функционала, но без лагов? Желательно без библиотек и фреймворков.
На элементе стоит touch-action: none, но при более-менее сильном свайпе перестаёт работать, что тоже я пока объяснить не могу.
Большое спасибо!
Дополнительно:
Можете выложить рабочий кусок на https://codepen.io/?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для устранения лагов при использовании JS-анимации при свайпе по двум осям, можно применить несколько методов:
1. Оптимизация кода: убедитесь, что ваш JavaScript код оптимизирован и эффективен. Избегайте лишних вычислений и циклов, используйте современные методы и функции.
2. Использование requestAnimationFrame: вместо использования setInterval или setTimeout для анимации, рекомендуется использовать requestAnimationFrame. Этот метод позволяет браузеру оптимизировать процесс анимации, что может улучшить производительность.
3. Оптимизация CSS: проверьте стили CSS, которые применяются к вашей анимации. Избегайте использования свойств, которые могут вызывать перерисовку или перепостроение страницы.
4. Использование аппаратного ускорения: если это возможно, используйте CSS свойства, которые могут быть ускорены аппаратно, например, transform и opacity.
Пример использования requestAnimationFrame в JavaScript:
function animate() { // ваш код анимации requestAnimationFrame(animate); } animate();
Применение этих методов может помочь устранить лаги при использовании JS-анимации при свайпе по двум осям и повысить производительность вашего веб-приложения.