jQuery鼠标后跟事件与元素动画相结合

jQuery Mousewheel event coupled with element animation

本文关键字：元素 动画 相结合 事件 鼠标 jQuery      更新时间：2023-09-26

场景：

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

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

请在此处查看演示

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为true，则限制滚动。但是，这并不能给我带来流畅的动画效果。在动画结束之前，鼠标滚动不会执行任何操作。

  2. 我使用setTimeout来保持滚动几毫秒，并对该时间段内触发的所有增量求和，但这也不平滑。

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

我想要什么：

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

更新1:

我昨天以来的进步可以在这里看到

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

我将使用$.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/

相关文章：