Greensock 在背景图像变化时淡入淡出

Question

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

精灵上显示的第一个背景图片无法缩放，但所有其他图片都可以，我该如何解决？
好像是先改变背景然后缩放。所以背景图像的变化和比例动画的开始之间有一个小的延迟。无论如何要收紧它以便它随着它的变化而扩展以使其更平滑地过渡？

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; I have used TimelineMax, TweenMax 的强大表亲，它使动画的 序列化 变得非常容易。
所以我们有一个 timeline 变量，它带有一个 TimelineMax 对象的实例，默认设置为：1. initially paused 和 2. 不确定的循环。
然后我们使用 .to() which basically will start animation from wherever the object currently is. There are a plethora of methods and properties available for the GSAP platform, you should explore.

timeline

在 .to() 调用的第一行，我们有一个指向函数的 onComplete 回调。
此回调根据当前迭代调整 backgroundPosition。
最后，还有另一个 .to() 调用执行相同的操作，即从 avatars 对象当前拥有的任何属性开始动画（在我们的例子中，scaleX & scaleY 会在 1.1 因为第一个 .to() 调用）。
注意：默认情况下，任何新的 .to()（或 .from() or .fromTo()) call is appended at the end of a timeline. Read more about the position parameter here。

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

更新： 这里是 another version 使用 TweenMax只要。我想瘦多了。

Greensock 在背景图像变化时淡入淡出

Greensock fading in and out on background image change

javascript

jquery

gsap