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 path进行曲线动画，而

jQuery mousewheel在鼠标滚轮上触发事件。

问题：

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

我尝试了什么：

如果isScrolling为真，我通过放置标记isScrolling来限制多个鼠标滚轮事件，并限制滚动。但是，这并没有给我流畅的动画。在动画结束之前，mousescroll什么都不做。
我使用setTimeout来保持滚动几毫秒并总结在那段时间内发射的所有增量，但它也不顺畅。
我尝试使用stop()。但stop()在中途停止动画，我想在标记（不在其上方/下方）的位置至少有一个点

我想要的是什么：

使用鼠标滚轮平滑动画（就像页面上的普通滚动一样）。更快的鼠标滚轮滚动应滚动超过正常（一次滚动一次）滚动。

更新1：

我可以看到自昨天以来的进展 here

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

Answer 1

我会使用css中的$.path.arc - 方法，并将其返回的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/

jQuery Mousewheel事件与元素动画相结合

1 个答案: