顺利抓住

Question

我做了一个简单的grabbing demo page。它没有任何缓和/加速。我想使用JavaScript在kulesh.info（Flash网站）上进行相同的缓动/加速。我怎么能这样做？

在JavaScript中平滑抓取（滚动，拖动）的任何示例都是有用的，也是一种语言无关的算法。

Answer 1

我认为这是jQuery最好的结果： [Demo]

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

注意，目前无法纠正所有可能的（轻微）迟缓，因为它与现代浏览器的图像渲染性能有关。 Test - 简单的线性动画，没有事件，没有jQuery

Answer 2

你可以使用有时被称为zeno悖论的缓动方程来获得闪光外观。

position += (destination - position) / damping

我修改了你的jsFiddle来使用它：Have a look

如果您希望我对zeno悖论进行更详细的描述，请告诉我，我会在这里张贴一两张图片。

Answer 3

尝试替换此行：

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

使用此（Updated demo）：

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