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

场景：

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

所以，我想出了一些代码

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

我正在使用曲线动画，和

触发鼠标滚轮上的事件

问题：

鼠标滚轮只是给我鼠标滚轮的方向，但不是速度。所以，如果用户滚动得更快，而不是给出增加的

delta

，它会多次触发鼠标滚轮事件。 它本来可以在简单的情况下工作，但我正在制作点的动画。因此，在动画完成之前，会触发多个鼠标滚轮事件。（您可以通过加快滚动速度查看）

我的尝试：

我通过放置一个标志

iscrowling

，限制了多个鼠标滚轮事件，如果

iscrowling

为true，则限制滚动。但是，这并不能给我平滑的动画效果。在动画完成之前，mousescroll不会执行任何操作

我使用了

setTimeout

来保持滚动几毫秒，并对在这段时间内触发的所有增量求和，但它也不平滑

我尝试使用

stop（）

。但是

stop（）

在中途停止动画，我希望在标记位置至少有一个点（不在其上方/下方）

我想要什么：

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

更新1:

从昨天开始，我的进步可见一斑

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

---

现在，在开始动画之前，我使用

setTimeout

对

delta

进行总结，然后使用相对持续时间在较大的delta中动画速度更快，在较小的delta中动画速度较慢。

我将使用

$.path.arc

中的

css

-方法，并将其返回的

css

-对象传递到

$.fn.animate

。要立即获取实际的

css

-对象，请使用鼠标滚轮-

delta

对其进行迭代：

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

要使其更平滑，应使用缓和功能：

$.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');

---

thx，用于将我指向

path.css

。但是你能看到快速滚动会破坏角度吗？它不再在那个曲线上移动了好吧，等你有时间的时候试试看。同时我会尽力的。我又找到了一种方法。如前所述，我使用setTimeout，然后根据delta动态更改

animate

的持续时间，我得到了一个非常平滑的动画。顺便说一句，对于您的effort@Jashwant你能分享一下

setTimeout

-小提琴吗？：）奇怪的是，JSFIDLE不允许我更新代码。返回此错误

端口：无法建立连接。接收端不存在。我会在以后再试，好的，在你们的方法中发现了问题。当插件改变
左侧
，
顶部
时，角度会改变，但也会改变
转换
。我从插件中删除了转换，它可以稍微工作（当我滚动得更快时会出现波动）。我需要知道，为什么在
css（）
函数中传递
delta-1
。可能是这造成了问题