平稳抓取

Question

我很简单 抓取演示页面. 。它没有任何缓解/加速度。我想做与上等的宽松/加速度 kulesh.info （Flash网站）使用JavaScript。我怎样才能做到这一点？

在JavaScript中平滑抓取（滚动，拖动）的任何示例都将很有帮助，以及语言不可知论算法。

Answer 1

您可以使用有时称为Zeno的悖论的宽松方程来获得Flash的外观。

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