Glätte greifen

Question

Ich habe ein einfaches gemacht Demo -Seite greifen. Es hat keine Lockerung/Beschleunigung. Ich würde gerne die gleiche Lockerung/Beschleunigung machen wie auf kulesh.info (Flash -Website) Mit JavaScript. Wie kann ich das machen?

Alle Beispiele für reibungsloses Greifen (Scrollen, Ziehen) in JavaScript wären hilfreich wie ein agnostischer Sprachalgorithmus.

Answer 1

Sie können den Flash -Look erhalten, indem Sie eine Lockerungsgleichung verwenden, die manchmal als Zenos Paradoxon bezeichnet wird.

position += (destination - position) / damping

Ich habe Ihre JSFIDDLE geändert, um sie zu verwenden: Guck mal

Wenn Sie möchten, dass ich eine detailliertere Beschreibung von Zenos Paradoxon geben soll, lassen Sie es mich wissen und ich werde hier ein oder zwei Bilder veröffentlichen.

Answer 2

Ich denke, dies ist das Beste, was Sie mit JQuery bekommen können: [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");
});

Beachten Sie, dass alle möglichen (leichten) Trägheit im Moment nicht korrigiert werden können, da es sich um die Bildungsleistung moderner Browser handelt. Prüfen - Einfache lineare Animation, keine Ereignisse, keine jQuery

Answer 3

Versuchen Sie, diese Zeile zu ersetzen:

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

mit diesem (Aktualisierte Demo):

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

Beachten Sie, dass ich auf die JQuery UI geklickt habe, um die Lockerungsoptionen hinzuzufügen. Außerdem ist es in der JFIDDLE -Demo (mit Firefox) sehr nervös, aber es tut das überhaupt nicht, wenn ich sie auf meinem Desktop teste oder wenn ich mir diese Demo in Chrome ansehe. Idealerweise wäre es am besten, die Lockerfunktion ohne JQuery -Animate zu verwenden. Aber das sollte Ihnen eine Idee geben.

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