Гладкий захват
-
26-09-2019 - |
Вопрос
Я сделал простой Схватив демонстрационную страницу. Отказ У него нет ослабления / ускорения. Я хотел бы сделать то же ослабление / ускорение как на kulesh.info. (Flash веб-сайт) с использованием JavaScript. Как я могу это сделать?
Любые примеры плавного захвата (прокрутка, перетаскивания) в JavaScript были бы полезны, а также языковой алгоритмом агностика.
Решение
Вы можете получить вспышку, используя уравнение ослабления, иногда называемые парадоксом Зено.
position += (destination - position) / damping
Я изменил свой jsfiddle, чтобы использовать его: Посмотри
Если вы хотите, чтобы я мог дать более подробное описание парадокса Зено, дайте мне знать, и я опубликую одно здесь с изображением или двумя.
Другие советы
Я думаю, что это лучшее, что вы можете получить с jQuery: [Демонстрация]
jQuery.fx.interval = 1; // since v1.4.3
var photos = $(".photos");
var scrollLeft = photos[0].scrollLeft;
var $el = $(photos[0]);
var lastTime = +new Date();
$(window).mousemove(function(event){
var now = +new Date();
var elapsed = now - lastTime;
if (dragging && elapsed > 10) {
scrollLeft += x - event.clientX;
$el.stop().animate({scrollLeft: scrollLeft}, 300, "easeOutCubic");
x = event.clientX;
lastTime = +new Date();
}
});
$(window).mouseup(function(event){
dragging = false;
$el.stop().animate({scrollLeft: scrollLeft}, 500, "easeOutCubic");
});
ПРИМЕЧАНИЕ, все возможное (незначительное) вязкость не может быть исправлено в данный момент, потому что он связан с отображением изображения изображений современных браузеров. Тестовое задание - Простая линейная анимация, нет событий, нет jQuery
Попробуйте заменить эту строку:
photos[0].scrollLeft += x - event.clientX;
с этим (Обновленное демонстрация):
photos.animate({ scrollLeft : '+=' + (x - event.clientX) }, 12, 'easeOutCirc');
Обратите внимание, что я нажал на jQuery ui, чтобы включить параметры ослабления. Кроме того, он очень крутится в демонстрации jfiddle (используя firefox), но это вообще не делает это вообще, когда я проверю его на своем рабочем столе, или если я смотрю на это демо в Chrome. В идеале используя функцию ослабления без использования JQuery Animate будет лучше. Но это должно дать вам идею.
var dragging = false;
var x, startX, startTime, stopTime;
var photos = $(".photos");
photos.mousedown(function(event){
dragging = true;
startX = x = event.clientX;
startTime = new Date();
event.preventDefault();
});
$(window).mousemove(function(event){
if (dragging) {
photos[0].scrollLeft += x - event.clientX;
stopTime = new Date();
x = event.clientX;
}
});
$(window).mouseup(function(event){
dragging = false;
var left = photos[0].scrollLeft;
var dx = (startX - event.clientX);
var time = stopTime - startTime;
var speed =time/dx;
photos.animate({ scrollLeft : (left + dx*time/500), easing :'swing' }, 100/time*1000);
});