Agarrando suave

Question

He hecho un simple Página de demostración de agarre. No tiene ninguna flexibilización/aceleración. Me gustaría hacer la misma facilidad/aceleración que en kulesh.info (Sitio web flash) Uso de JavaScript. ¿Cómo puedo hacer eso?

Cualquier ejemplo de agarre suave (desplazamiento, arrastre) en JavaScript sería útil, así como un algoritmo agnóstico de lenguaje.

Answer 1

Puede obtener el aspecto flash utilizando una ecuación de flexibilización a veces denominada paradoja de Zeno.

position += (destination - position) / damping

Modifiqué tu jsfiddle para usarlo: Echar un vistazo

Si desea que le dé una descripción más detallada de la paradoja de Zeno, avíseme y publicaré uno aquí con una imagen o dos.

Answer 2

Creo que esto es lo mejor que puedes obtener con jQuery: [Manifestación]

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");
});

Tenga en cuenta que toda la lentitud posible (leve) no se puede corregir en este momento, porque está relacionado con el rendimiento de representación de imágenes de los navegadores modernos. Prueba - Animación lineal simple, sin eventos, sin jQuery

Answer 3

Intenta reemplazar esta línea:

photos[0].scrollLeft += x - event.clientX;

con este (Demostración actualizada):

photos.animate({ scrollLeft : '+=' + (x - event.clientX) }, 12, 'easeOutCirc');

Tenga en cuenta que hice clic en JQuery UI para incluir las opciones de flexibilización. Además, es muy nervioso en la demostración JFIDDLE (usando Firefox), pero no lo hace en absoluto cuando lo pruebo en mi escritorio o si miro esa demostración en Chrome. Idealmente, usar la función de flexibilización sin usar jQuery Animate sería lo mejor. Pero esto debería darte una idea.

Answer 4

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);  
});