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

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

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


person NVI    schedule 20.11.2010    source источник
comment
kulesh.info загружается слишком медленно, чтобы быть полезным; у вас есть другая ссылка с аналогичным эффектом?   -  person meagar    schedule 20.11.2010
comment
Типичный флеш-сайт. Судоходно даже не судоходно... впрочем, приличный эффект.   -  person Derek Adair    schedule 30.11.2010


Ответы (4)


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

position += (destination - position) / damping

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

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

person Zevan    schedule 30.11.2010
comment
Интересный подход, но браузеры, не поддерживающие WebKit, имеют заметное отставание при запуске захвата. Не работает в Firefox, потому что вы не указали второй аргумент. - person NVI; 01.12.2010
comment
интересно... не указали второй аргумент для чего? - person Zevan; 01.12.2010
comment
а, понятно... второй аргумент функции setInterval. Я обновил свою ссылку, чтобы включить это - это была простая опечатка ... Обычно я включаю этот аргумент. - person Zevan; 01.12.2010
comment
в каком браузере или браузерах, отличных от Webkit, вы его тестировали? - person Zevan; 01.12.2010
comment
Фаерфокс 3.6, Опера 10.63, IE8. - person NVI; 01.12.2010
comment
@st3 — добавлено смягчение, но я бы не сказал, что оно быстрее: jsbin.com/ageci3/14 - person gblazex; 12.01.2011

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

person gblazex    schedule 25.11.2010
comment
Кажется, это лучшее решение на данный момент. - person NVI; 26.11.2010

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

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

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

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

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

person Mottie    schedule 20.11.2010
comment
Задержка в 12 мс слишком мала, чтобы внести какие-либо существенные изменения. Я почти не вижу разницы в бета-версии Safari, Chrome и Firefox 4. Я пытался использовать регулирование jsfiddle.net/NV/Nkf9n/3, но это все еще намного хуже по сравнению с версией Flash. - person NVI; 21.11.2010
comment
Ну, я возился с синхронизацией анимации, и все, что больше 20 мс, было слишком много, а меньше 10 мс - слишком мало. Все это действительно зависит от браузера... Я не могу придумать, что еще можно сделать =(... но вы, возможно, захотите рассмотреть возможность добавления прокрутки колесика мыши - я недавно сделал эту демонстрацию в качестве примера: jsfiddle.net/MvRdD/1 - person Mottie; 22.11.2010

person    schedule
comment
Он добавляет анимацию при поднятии мыши, но не меняет ускорение, когда я захватываю изображение. - person NVI; 25.11.2010