Afferrare liscio

Question

Ho fatto un semplice afferrare la pagina demo. Non ha alcun allentamento/accelerazione. Vorrei fare la stessa allentamento/accelerazione kulesh.info (Sito Web Flash) Utilizzo di JavaScript. Come lo posso fare?

Eventuali esempi di afferrare fluidi (scorrimento, trascinare) in JavaScript sarebbe utile e un algoritmo agnostico del linguaggio.

Answer 1

Puoi ottenere l'aspetto flash usando un'equazione di allentamento a volte indicata come paradosso di Zeno.

position += (destination - position) / damping

Ho modificato il tuo jsfiddle per farne uso: Dare un'occhiata

Se desideri che tu dia una descrizione più dettagliata del paradosso di Zeno, fammi sapere e ne posterò una qui con un'immagine o due.

Answer 2

Penso che questo sia il meglio che puoi ottenere con jQuery: [Demo]

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

Nota, tutta la possibile (leggera) lentezza non può essere corretta al momento, perché è correlata alle prestazioni di rendimento delle immagini dei browser moderni. Test - semplice animazione lineare, niente eventi, niente jQuery

Answer 3

Prova a sostituire questa riga:

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

con questo (Demo aggiornato):

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

Nota che ho fatto clic su JQuery UI per includere le opzioni di allentamento. Inoltre, è molto nervoso nella demo JFIDLE (usando Firefox), ma non lo fa affatto quando lo provo sul mio desktop o se guardo quella demo in Chrome. Idealmente usare la funzione di allentamento senza usare JQuery Animate sarebbe il migliore. Ma questo dovrebbe darti un'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);  
});