jQuery鼠标轮事件与元素动画耦合

Question

场景：

我需要创建一个曲线动画(弧形)，由鼠标轮触发。

所以，我有一些代码。

参见这里的演示

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路径进行曲线动画，并且

jQuery滚轮用于触发鼠标轮上的事件。

问题：

鼠标轮只是给了我鼠标轮的方向，而不是速度。因此，如果用户滚动速度更快，而不是提供更多的delta，它会多次触发鼠标轮事件。它本可以在简单的情况下工作，但我是动画的观点。因此，在动画完成之前，会触发多个鼠标轮事件。(你可以通过更快的滚动来看到它)

我尝试了什么：

1. 我通过放置一个标志isScrolling来限制多个鼠标轮事件，如果isScrolling为真，则限制滚动。但是，这并不能给我流畅的动画。在动画结束之前，穆斯克罗尔什么都不做。
2. 我使用setTimeout来保持滚动数毫秒，并对在这段时间内触发的所有三角洲进行求和，但也不是很顺利。
3. 我试过使用stop()。但是stop()在中途停止动画，我希望在标记位置至少有一个点(而不是在它上面/下面)

我想要的：

光滑的动画与鼠标轮(就像正常的滚动在一页)。更快的鼠标滚轮滚动应该比正常滚动(一次一个滚动)更多滚动。

更新1:

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

现在，我使用setTimeout在启动动画之前对deltas进行总结，然后使用相对持续时间在较大的三角洲中更快地动画，在较小的三角洲中使用更慢的动画。

Answer 1

我将使用来自css-method的$.path.arc，并将其返回的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/