Плавный захват

Question

Я сделал простую демонстрационную страницу захвата . Это не имеет никакого замедления / ускорения. Я хотел бы сделать такое же замедление / ускорение, как на kulesh.info (Flash-сайт) с использованием JavaScript. Как я могу это сделать?

Были бы полезны любые примеры плавного захвата (прокрутки, перетаскивания) в JavaScript, а также алгоритм, не зависящий от языка.

Answer 1

Я думаю, что это лучшее, что вы можете получить с помощью 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

Answer 2

Вы можете получить эффект вспышки, используя уравнение замедления, которое иногда называют парадоксом Зенона.

position += (destination - position) / damping

Я изменил ваш jsFiddle, чтобы использовать его: Посмотрите

Если вы хотите, чтобы я дал более подробное описание парадокса Зенона,дайте мне знать, и я опубликую один здесь с изображением или двумя.

Answer 3

Попробуйте заменить эту строку:

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

на эту ( Обновленная демоверсия ):

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

Обратите внимание, что я нажал на пользовательский интерфейс jQuery, чтобы включить замедлениеопции.Кроме того, в демоверсии jFiddle (с использованием Firefox) он очень нервный, но он этого не делает, когда я тестирую его на своем рабочем столе или смотрю на эту демонстрацию в Chrome.В идеале лучше всего использовать функцию замедления без использования jQuery animate.Но это должно дать вам представление.

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