الاستيلاء السلس

Question

لقد صنعت بسيطة الاستيلاء على الصفحة التجريبية. ليس لديها أي تخفيف/تسارع. أود أن أفعل نفس التخفيف/التسارع كما في Kulesh.info (موقع فلاش) باستخدام JavaScript. كيف أقوم بذلك؟

أي أمثلة على الاستيلاء السلس (التمرير ، السحب) في JavaScript سيكون مفيدًا بالإضافة إلى خوارزمية غير ملائمة اللغة.

Answer 1

يمكنك الحصول على نظرة فلاش باستخدام معادلة تخفيف يشار إليها أحيانًا باسم مفارقة Zeno.

position += (destination - position) / damping

لقد قمت بتعديل JSFiddle للاستفادة منه: الق نظرة

إذا كنت ترغب في أن أعطي وصفًا أكثر تفصيلاً لمفارقة Zeno ، فأخبرني وسأقوم بنشر واحدة هنا مع صورة أو اثنتين.

Answer 2

أعتقد أن هذا هو أفضل ما يمكنك الحصول عليه مع 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 3

حاول استبدال هذا الخط:

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

مع هذا (العرض التجريبي المحدث):

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

لاحظ أنني نقرت على jQuery UI لتضمين خيارات التخفيف. وأيضًا ، فهي قفز للغاية في عرض Jfiddle (باستخدام Firefox) ، لكنه لا يفعل ذلك على الإطلاق عندما أقوم باختباره على سطح المكتب الخاص بي أو إذا نظرت إلى هذا العرض التوضيحي في Chrome. من الناحية المثالية ، سيكون استخدام وظيفة التخفيف دون استخدام تحريك jQuery. ولكن هذا يجب أن يعطيك فكرة.

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