javascript - 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在鼠标滚轮上触发事件。

问题:

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

我尝试了什么:

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

2. 我使用 setTimeout 来保持滚动几毫秒并对那段时间触发的所有增量求和，但它也不流畅。

3. 我尝试使用 stop()。但是 stop() 在中途停止动画，我希望在 marker 的位置至少有一个点(不是在它上面/下面)

我想要的:

鼠标滚轮的流畅动画(就像页面上的正常滚动一样)。更快的鼠标滚轮滚动应该比正常(一次滚动一个)滚动更多。

更新 1:

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

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

Answer 1

我会使用 $.path.arc 中的 css 方法，并将其返回的 css 对象传递给 $。 fn.animate。现在要获取实际的 css 对象，请使用鼠标滚轮-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/