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 ;我使用了 TimelineMax ， TweenMax 强大的表兄，让动画的排序非常容易。
因此，我们有一个timeline变量，其中包含TimelineMax对象的实例，默认设置为： 1。最初暂停且 2。不确定的循环。
然后，我们使用 .to() 方法填充此timeline，该方法基本上将从对象当前的任何位置开始动画。 GSAP平台有许多方法和属性，you should explore。
在.to()来电的第一行，我们有一个指向某个功能的onComplete回调。
此回调根据当前迭代调整backgroundPosition。
最后，还有另一个.to()调用也是这样做的，即从当前拥有的avatars对象属性开始动画（在我们的例子中，scaleX＆amp; scaleY由于第一次1.1来电，我会在.to()。
注意：默认情况下，任何新的.to()（或.from()或.fromTo()）调用都会附加在时间轴的末尾。详细了解position参数here。

如果您有任何问题，请与我们联系。

更新： 此处 another version 仅使用TweenMax。我想更精简。

Greensock在背景图像变化中消失

1 个答案: