Greensock 在背景图像更改时淡入淡出

Question

我以前从未使用过 GreenSock。背景图像变化很好，它会切换和缩小，但是我面临的问题如下：

1. 要显示的 sprite 上的第一个背景图像无法缩放，但其他所有图像都可以，我该如何解决这个问题？
2. 它似乎改变了背景，然后按比例放大和缩小。所以在背景图像的变化和缩放动画的开始之间有一个小的延迟。有没有办法收紧这一点，以便随着它的变化而扩展，使其过渡更顺畅？

JavaScript：

// Avatar animations
var avatarInterval;
var fadePulse           = true; // true: will fade avatar images and pulse in and out once changed
                                // false: will slide the avatars in and out 
var avatarCount         = 11;   // set the amount of avatars in the sprite image
var avatarSpeed         = 1000; // set the avatar transition speed
var avatarHeight        = 250;  // set the height of a single avatar image
var avatarTotalHeight   = 2750; // set the total height of the avatar sprite image

function startAvatarAnimation() {
    var i = 0;
    $(".avatars").show();

    // Loop through avatar background images on sprite
    avatarInterval = setInterval(function(){
        i++;
        if(i > avatarCount){
            i = 0;
        }

        // Let's change the background
        $(".avatars").css({'background-position' : '0 -' + (i*avatarHeight) + 'px' });

        // avatar fading / pulse effect
        if (fadePulse == true) {
            // Now some scaling effects!
            TweenMax.to(avatars, 0.1, {
                css: {
                    // 'background-position': '0 -' + (i*avatarHeight) + 'px',
                    scaleX: 1.1,
                    scaleY: 1.1,
                    transformOrigin: "center center"
                },
                        onComplete: scaleOut,
                    onCompleteParams: [avatars],
                delay: 0.1,
                ease: Power3.easeInOut
            });

            // Bring the scale back to normal
            function scaleOut(el) {
                TweenMax.to(el, 0.1, {
                    css: {
                        scaleX: 1.0,
                        scaleY: 1.0,
                        transformOrigin: "center center",
                        autoAlpha: 1,
                    },
                    ease: Power2.easeOut
                });
            }
        } else {
            // avatar sliding effect
        }

    }, avatarSpeed);

    return false;
}

Answer 1

看看this result。

片段：

var avatarCount = 6;
var avatarHeight = 250;
var avatarTotalHeight = 1500;
var avatars = $(".avatars");
var animDuration = 0.1;
var i = 0;
var timeline = new TimelineMax({ paused: true, repeat: -1 });
timeline.to(avatars, animDuration, {
  scaleX: 1.1,
  scaleY: 1.1,
  ease: Power3.easeIn,
  onComplete: onCompleteScaleIn
});
timeline.to(avatars, animDuration, {
  scaleX: 1.0,
  scaleY: 1.0,
  ease: Power3.easeOut
});

function onCompleteScaleIn() {
  i++;
  i = i >= avatarCount ? 0 : i;
  TweenMax.set(avatars, {
    backgroundPosition: '0 -' + (i * avatarHeight) + 'px'
  });
}

timeline.play();

#container {} #container,
.section {
  overflow: hidden;
  position: relative;
}
.section {
  position: absolute;
}
#container .logo_o2 {
  bottom: 10px;
  right: 20px;
}
.section {
  position: relative;
  height: 250px;
  width: 300px;
  display: block;
}
.section .abs {
  position: absolute;
}
.section h1,
.section h2,
.section h3,
.section h4 {
  font-size: 21px;
  width: 100%;
  text-align: center;
  letter-spacing: 0;
}
.section1,
.section2,
.section3,
.section4,
.section5,
.section6 {} .avatars {
  background-image: url(http://s1.postimg.org/dwt9yu9b3/test_bg_sprite.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 250px;
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="section section3">
  <div class="abs clouds"></div>
  <div id="avatars" class="abs avatars"></div>
</div>

详情：

• 首先，这个结果可以通过多种方式更有效地实现。即使在TweenMax 内，也可能有许多可能的解决方案。因此，这种尝试绝不应该是最好的。
• 因为你已经在使用GSAP；我使用了 TimelineMax，TweenMax 的强大表亲，它使动画的排序变得非常容易。
• 所以我们有一个timeline 变量，它带有TimelineMax 对象的实例，默认设置为：1. 最初暂停和2. 不确定循环。
• 然后我们使用 .to() 方法填充此 timeline，该方法基本上将从对象当前所在的任何位置开始动画。 GSAP 平台有大量可用的方法和属性，you should explore。
• 在.to() 调用的第一行，我们有一个指向函数的onComplete 回调。
• 此回调根据当前迭代调整backgroundPosition。
• 最后，还有另一个 .to() 调用执行相同的操作，即从 avatars 对象当前拥有的任何属性开始动画（在我们的例子中，scaleX 和 scaleY 将在 1.1，因为第一个.to() 电话）。
• 注意：默认情况下，任何新的.to()（或.from() 或.fromTo()）调用都附加在时间线的末尾。详细了解position 参数here。

如果您有任何问题，请告诉我。

更新：这里是 another version，仅使用 TweenMax。我猜要瘦得多。