TweenLite -添加的像素超过指定数量的动画

Question

我正在创建一个由4个部分组成的垂直旋转木马。我将一个外包装设置为整个窗口的高度和宽度，并将一个内包装绝对定位在这个外包装内。

我试图在鼠标滚轮滚动上为它添加动画，但它添加了太多像素？

以下是鼠标滚轮事件的代码：(我使用了一个滚动插件)

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

当我滚动滚轮时，我希望它只增加50px，但它总是增加更多( 50px到大约73px之间的任意随机数)。这些数字不是50的倍数，这一事实也表明鼠标滚轮滚动不仅仅是运行了太多次。

我如何才能确保旋转木马只会滑动50px？

Answer 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;
            }});            
        }
    });

Answer 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});
});