Agarrar suave

Question

Eu fiz um simples Agarrando a página de demonstração. Não tem nenhuma flexibilização/aceleração. Eu gostaria de fazer a mesma flexibilização/aceleração que kulesh.info (Site flash) usando JavaScript. Como eu posso fazer isso?

Quaisquer exemplos de captura suave (rolagem, arrastar) em JavaScript seria útil, bem como um algoritmo agnóstico de idioma.

Answer 1

Você pode obter a aparência do flash usando uma equação de flexibilização, às vezes chamada de paradoxo de Zeno.

position += (destination - position) / damping

Modifiquei seu jsfiddle para usá -lo: Dar uma olhada

Se você quiser que eu dê uma descrição mais detalhada do paradoxo de Zeno, me avise e postarei um aqui com uma ou duas imagens.

Answer 2

Eu acho que este é o melhor que você pode obter com o jQuery: [Demonstração]

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

Observe que toda a lentidão (leve) (leve) não pode ser corrigida no momento, porque está relacionada ao desempenho da renderização de imagens dos navegadores modernos. Teste - Animação linear simples, sem eventos, sem jQuery

Answer 3

Tente substituir esta linha:

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

com isso (Demo atualizado):

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

Observe que cliquei na interface do usuário do jQuery para incluir as opções de flexibilização. Além disso, é muito macio na demonstração JFiddle (usando o Firefox), mas não faz isso quando o testo na minha área de trabalho ou se olho para essa demonstração no Chrome. Idealmente, usar a função de flexibilização sem usar o JQuery Animate seria o melhor. Mas isso deve lhe dar uma ideia.

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