加上元件动画jQuery的鼠标滚轮事件

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

问题：

鼠标滚轮刚刚给我的鼠标滚轮的方向，而不是速度。所以，如果用户滚动速度更快，而不是增加delta，它会多次触发mousewheel事件。 它可以在简单的情况下工作，但我的动画点。因此，在动画完成之前，会触发多个鼠标滚轮事件。 （您可以通过滚动快看看吧）

我试了一下：

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

2. 我用setTimeout来保持滚动几毫秒，并加总那段期间所有的增量，但它也不光滑。

3. 我试过使用stop()。但stop()停在中途动画，我想在标记的位置ATLEAST一点（不高于/低于它）

我想要什么：

流畅的动画效果与鼠标滚轮（只就像页面上的正常滚动一样）。更快的滚轮滚动应滚动超过正常（一次滚动一次）滚动。

更新1：

我的进步，因为昨天可以看出here

现在，我使用setTimeout开始的动画，然后用一个相对持续时间以动画更快之前总结deltas较大的三角洲和较小的三角洲较慢。

Answer 1

我会使用css - 方法从$.path.arc并通过其返回css - 对象$.fn.animate。要获得实际css -object现在，使用mousewheel- 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/