jQuery Mousewheel 事件加上元素动画

Question

场景：

我需要创建一个由鼠标滚轮触发的曲线动画（弧形）。

所以，我想出了一些代码。

See demo here

var arc = {
    center: [-200, ($(window).height() - 24) / 2],
    // height + padding
    radius: 450,
    start: 0,
    end: 90,
    dir: 1
}

$('.point').each(function () {
    $(this).data('lastEnd', arc.end).animate({
        path: new $.path.arc(arc)
    }, 0);

    arc.start -= 10;
    arc.end -= 8;
});

$('body').mousewheel(function (e, delta, deltaX, deltaY) {
    e.preventDefault();
    var delta = delta * -1;
    $('.point').each(function () {
        var $this = $(this);
        var startPoint = $this.data('lastEnd');
        var arc = {
            center: [-200, ($(window).height() - 24) / 2],
            radius: 450,
            start: startPoint,
            end: (delta * 8) + startPoint,
            dir: delta > 0 ? 1 : -1
        }
        $this.data('lastEnd', arc.end);

        $(this).animate({
            path: new $.path.arc(arc)
        }, 500);
    });
});

我正在使用jQuery path 进行曲线动画，并且

jQuery mousewheel 触发鼠标滚轮事件。

问题：

鼠标滚轮只是给我鼠标滚轮的方向，而不是速度。因此，如果用户滚动得更快，而不是增加delta，它会多次触发鼠标滚轮事件。 它本来可以在简单的情况下工作，但我正在为这些点设置动画。因此，在动画结束之前会触发多个鼠标滚轮事件。 （你可以通过滚动更快看到它）

我尝试了什么：

1. 如果isScrolling 为真，我通过设置标志isScrolling 来限制多个鼠标滚轮事件，并限制滚动。但是，这并没有给我流畅的动画。在动画结束之前，mousescroll 什么都不做。

2. 我使用setTimeout 来保持滚动几毫秒，并将该期间触发的所有增量相加，但它也不平滑。

3. 我尝试使用stop()。但是stop() 中途停止了动画，我希望在 marker 的位置至少有一个点（而不是高于/低于它）

我想要什么：

鼠标滚轮的平滑动画（就像页面上的正常滚动一样）。更快的鼠标滚轮滚动应该比正常滚动（一次滚动一个）滚动更多。

更新 1：

可以看到我从昨天开始的进步here

现在，我在开始动画之前使用 setTimeout 总结 deltas，然后使用相对持续时间在较大的增量中更快地制作动画，而在较小的增量中制作更慢的动画。

Answer 1

我会使用$.path.arc 中的css-方法并将其返回的css-object 传递给$.fn.animate。要立即获取实际的css-object，请使用鼠标滚轮-delta 对其进行迭代：

var path = new $.path.arc(arc);
$this.stop().animate(path.css(delta-1), 500);

http://fiddle.jshell.net/Tfwqu/1/

要使这个平滑，你应该使用缓动函数：

$.easing.easeOutQuad = function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
};

...

var path = new $.path.arc(arc);
$this.stop().animate(path.css(delta-1), 500, 'easeOutQuad');

http://fiddle.jshell.net/Tfwqu/2/