2

设想：

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

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

在此处查看演示

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为真）。但是，这并没有给我流畅的动画。直到动画结束，mousescroll 什么都不做。

  2. 我曾经setTimeout保持滚动几毫秒并将在那段时间内触发的所有增量相加，但它也不平滑。

  3. 我尝试使用stop(). 但是中途停止动画，我希望在标记stop()位置至少有一个点（不在其上方/下方）

我想要的是：

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

更新 1：

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

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

4

1 回答 1

1

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

于 2013-08-02T15:09:52.733 回答