TweenLite - 动画添加比指定更多的像素答案

【问题标题】：TweenLite - Animation Adding More Pixels Than SpecifiedTweenLite - 动画添加比指定更多的像素
【发布时间】：2015-07-26 17:39:04
【问题描述】：

我正在创建一个由 4 个部分组成的垂直轮播。我有一个外包装设置为窗口的整个高度和宽度，并且一个内包装绝对位于这个外包装内。

我正在尝试在鼠标滚轮滚动上对其进行动画处理，但它添加了太多像素？

这是鼠标滚轮事件的代码：（我使用的是滚动插件）

$('.carousel-outer-wrapper').on('mousewheel', function(event) {
        var carousel = $('.carousel-wrapper');
        TweenLite.to(carousel, 1, {top: "+=50px"});
    });

当我滚动滚轮时，我希望它只添加 50 像素，但它总是会添加更多（50 像素到大约 73 像素之间的任何随机数）。数字不是 50 的倍数这一事实也表明鼠标滚轮滚动不只是运行了太多次。

如何确保轮播仅滑动 50 像素？

【问题讨论】：

如果我理解正确，当您第一次使用 mousewheel 并仅稍微滚动一次时，轮播执行良好并添加 50px到它的 top 位置。但是当动画正在进行时，如果您向其添加另一个 mousewheel 事件，则轮播会在您当前正在运行的动画中添加另一个 50px 并且最终结果变为 a对仍在进行中的现有位置增加 50 像素。这是您遇到问题的部分，对吗？就目标 top 值而言，您总是希望 50px 的倍数？
是的，我想要实现的是当用户滚动鼠标滚轮时，它会将滑块滚动到指定的像素数量。
我认为将目标值缓存到全局定义的变量中，并在每个 mousescroll 上向该变量添加更多内容会对您有所帮助。例如，如果destTop 是您的全局（或在某个范围内）变量。然后在每个 mousewheel 事件中，您执行destTop += 50;，这会有所帮助。在您的 TweenLite 中，您只会将动画设置为 destTop 值。得到？
或者您可以确保补间在执行时不会触发。并且仅在 Tween 休息时执行。

标签： jquery css animation gsap

【解决方案1】：

我已经找到了解决问题的方法。

它没有解释为什么动画添加了不是 50 倍数的额外像素，但它确实阻止了滑块多次运行该函数。

我将代码更改为以下内容，现在可以使用：

    var blockedSlider = false;

    $('.carousel-outer-wrapper').on('mousewheel', function(event) {
        if (blockedSlider == false) {
            blockedSlider = true;
            var carousel = $('.carousel-wrapper');
            TweenLite.to(carousel, 1, {top: "-=50px", onComplete:function() {               
                blockedSlider = false;
            }});            
        }
    });

【讨论】：

【解决方案2】：

我的拙见有两个选择：

仅在动画静止时补间。
使用全局变量作为目标值，添加（或删除）该变量。和TweenLite 只会将该变量用作其目的地。

示例 #1：

if (!TweenMax.isTweening(carousel)) { // only execute when the tween on this object is not running
  // your code for tween goes here.
}

示例 #2：

destY = 0;
$('.carousel-outer-wrapper').on('mousewheel', function(event) {
  destY += 50;
  var carousel = $('.carousel-wrapper');
  TweenLite.to(carousel, 1, {top: destY});
});

【讨论】：