Drag and Drop с линейной интерполяцией в JavaScript

От автора: используйте линейную интерполяцию для создания плавного и эффективного UX перетаскивания с использованием vanilla JavaScript.

Недавно я написал статью о реализации функции перетаскивания с использованием vanilla JavaScript. На этот раз я хочу применить линейную интерполяцию для логики перетаскивания, чтобы перетаскиваемый объект плавно «догонял» курсор / точку касания пользователя, а не сразу следовал за ним:

Без линейной интерполяции

С линейной интерполяцией

Основы

Линейная интерполяция — это способ проецирования данных между известными состояниями. В случае функции перетаскивания его можно использовать для создания координат между текущим и будущим положением перетаскиваемого элемента, чтобы мы могли создать плавный переход между этими двумя состояниями. Основная функция, которую мы собираемся использовать:

function lerp(start, end, amt) { return (1-amt)*start+amt*end
};

Итак, если наша начальная координата равна 100, координата конечного состояния равна 200, а величина, которую мы хотим интерполировать для каждого цикла перерисовки (~ кадр), равна 0,1, тогда:

Frame 1 = (1-0.1)*100 + 0.1*200 = 110;
Frame 2 = (1-0.1)*110 + 0.1*200 = 119;
Frame 2 = (1-0.1)*119 + 0.1*200 = 127.1;
...
Frame N = (1-0.1)*199 + 0.1*200 = 199.1;

Теперь, если мы подумаем о варианте использования перетаскивания, приведенная выше функция создает последовательность координат, через которые перетаскиваемый элемент должен будет пройти.

Начальная настройка

Вот исходный код, который присоединяет прослушиватели, нужные нам для базового функционала перетаскивания:

<div class="container"> <div style="top: 100px; left: 100px" class="box"></div> <div style="top: 200px; left: 200px" class="box"></div> <div style="top: 300px; left: 300px" class="box"></div> <div style="top: 400px; left: 400px" class="box"></div>
</div>

.container { width: 600px; height: 600px; background-color: darkgrey; touch-action: none; user-select: none;
}
.box { position: absolute; width: 100px; height: 100px; background-color: black;
}

Приведенный код отображает контейнер, к которому будут прикреплены прослушиватели событий, и блоки, которые позже станут перетаскиваемыми. Теперь мы добавим JavaScript, который работает с магией перетаскивания, пока еще ничего не перемещая:

const container = document.querySelector('.container');
container.addEventListener('pointerdown', userPressed, { passive: true }); var element, bbox, inputX, inputY, boxCenterX, boxCenterY, raf; function userPressed(event) { element = event.target; if (element.classList.contains('box')) { console.log("picked up!") container.addEventListener('pointermove', userMoved, { passive: true }); container.addEventListener('pointerup', userReleased, { passive: true }); container.addEventListener('pointercancel', userReleased, { passive: true }); };
}; function userMoved(event) { console.log("dragging!")
}; function userReleased(event) { console.log("dropped!") container.removeEventListener('pointermove', userMoved); container.removeEventListener('pointerup', userReleased); container.removeEventListener('pointercancel', userReleased);
};

Несколько примечаний:

Добавление линейной интерполяции

Принимая во внимание пользовательский опыт, мы должны предположить, что интерполяция должна стать «активной» после того, как пользователь нажимает на указатель, а затем становится «неактивной» после того, как пользователь отпускает указатель. Так что-то должно вызывать функцию Lerp (= линейная интерполяция) непрерывно между событиями pointerdown и pointerup/pointercancel.

Мы могли бы, конечно, использовать setInterval, но лучшим вариантом был бы RequestAnimationFrame API, поскольку он дает нам точный таймер кадра рендеринга 60 кадров в секунду (1000 мс / 60 = ~ 16,7 мс). Реализуем эту часть:

const container = document.querySelector('.container');
container.addEventListener('pointerdown', userPressed, { passive: true }); var element, raf; function userPressed(event) { element = event.target; if (element.classList.contains('box')) { console.log("picked up!") container.addEventListener('pointermove', userMoved, { passive: true }); container.addEventListener('pointerup', userReleased, { passive: true }); container.addEventListener('pointercancel', userReleased, { passive: true }); raf = requestAnimationFrame(userMovedRaf); };
}; function userMoved(event) { console.log("dragging!")
}; function userMovedRaf() { console.log("calling LERP") raf = requestAnimationFrame(userMovedRaf)
}; function userReleased(event) { console.log("dropped!") container.removeEventListener('pointermove', userMoved); container.removeEventListener('pointerup', userReleased); container.removeEventListener('pointercancel', userReleased); if (raf) { cancelAnimationFrame(raf); raf = null; };
}; function lerp (start, end, amt) { return (1-amt)*start+amt*end
};

Теперь все наши методы вызываются правильно, и мы можем реализовать логику, которая позволяет перерисовывать прямоугольник, используя интерполированные координаты:

Полная реализация приведена ниже:

const container = document.querySelector('.container');
container.addEventListener('pointerdown', userPressed, { passive: true }); var element, bbox, inputX, inputY, boxCenterX, boxCenterY, raf; function userPressed(event) { element = event.target; if (element.classList.contains('box')) { inputX = event.clientX; inputY = event.clientY; bbox = element.getBoundingClientRect(); boxCenterX = bbox.left + bbox.width/2; boxCenterY = bbox.top + bbox.height/2; container.addEventListener('pointermove', userMoved, { passive: true }); container.addEventListener('pointerup', userReleased, { passive: true }); container.addEventListener('pointercancel', userReleased, { passive: true }); raf = requestAnimationFrame(userMovedRaf); };
}; function userMoved(event) { inputX = event.clientX; inputY = event.clientY;
}; function userMovedRaf() { let x = lerp(boxCenterX, inputX, 0.05); let y = lerp(boxCenterY, inputY, 0.05); element.style.left = x - bbox.width/2 + "px"; element.style.top = y - bbox.width/2 + "px"; boxCenterX = x; boxCenterY = y; raf = requestAnimationFrame(userMovedRaf)
}; function userReleased(event) { container.removeEventListener('pointermove', userMoved); container.removeEventListener('pointerup', userReleased); container.removeEventListener('pointercancel', userReleased); if (raf) { cancelAnimationFrame(raf); raf = null; };
}; function lerp (start, end, amt) { return (1-amt)*start+amt*end
};

Заключение

Мы реализовали другой вид перетаскивания на чистом JavaScript, используя базовую линейную интерполяцию:

Линейная интерполяция — отличный способ создать плавное перетаскивание для пользователей, особенно в тех случаях, когда вам нужно убедиться, что курсор / точка ввода касания пользователя не всегда блокируется перетаскиваемым элементом. Полная демонстрация доступна на codepen.io:

Спасибо за прочтение!

Автор: Sergey Rudenko

Источник: https://medium.com

Редакция: Команда webformyself.