使用 GSAP 制作的动画循环

Question

我有 3 张图片。它们随着动画而变化。

使用 GSAP，我想制作重复多次（例如 5、6 或 7 次）的动画循环。我使用了 .restart() 方法，但它不能正常工作。我在第三张图片消失后调用此方法，但随后从第二张图片开始循环并且某些动画不起作用。所以我不知道该怎么办。请帮帮我:(

简单来说，我有 3 张图片，它们依次随着旋转、缩放和不透明度的变化而变化。在第三张图片淡出后，我想类似地重复我的动画（按顺序旋转、缩放和不透明度）。所以我的问题是让循环来做到这一点。

HTML：

<div align="center">
    <img id ="image" src="http://s1.1zoom.me/b4445/4/Planets_Nebulae_in_space_518424_240x400.jpg" width="240px" height="400px">
    <img id ="image1" src="http://www.mobi-city.ru/wallpaper/image/nature_13_240x400.jpg" width="240px" height="400px">
    <img id ="image2" src="http://m.chromesphere.net/Finals/chromesphere/chromesphere_i900_240x400.jpg" width="240px" height="400px">
</div>

CSS：

#image, #image1, #image2 {
    display: none;
    position: relative;
    left: 0%;
}

div {
    width: 100%;
}

JS：

$("#image").css("display", "block");
var image = document.getElementById('image');
var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');

    var tl = new TimelineLite({
        delay: 2,
        onComplete: function() {
            $("#image").css("display", "none");
            $("#image1").css("display", "block");
            TweenLite.fromTo(image1, 1, {scale: 0, opacity: 0}, {scale: 1, opacity: 1, delay: 0})

                            var tl_1 = new TimelineLite({
                            delay: 2,
                            onComplete: function() {
                                $("#image1").css("display", "none");
                                $("#image2").css("display", "block");
                                TweenLite.fromTo(image2, 1, {scale: 0, opacity: 0}, {scale: 1, opacity: 1, delay: 0})

                                                var tl_2 = new TimelineLite({
                                                delay: 2,
                                                onComplete: function () {
                                                    alert("done");
                                                    tl.restart();
                                                }
                                                });

                                                tl_2.add(TweenLite.to(image2, 1, {scale: 0, opacity: 0, ease: Back.easeIn}), 1);
                                                tl_2.add(TweenLite.to(image2, 2, {x: 0, rotation: 360, ease: Power1.easeInOut}), 0);




                                }
                            });

                    tl_1.add(TweenLite.to(image1, 1, {scale: 0, opacity: 0, ease: Back.easeIn}), 1);
                    tl_1.add(TweenLite.to(image1, 2, {x: 0, rotation: 360, ease: Power1.easeInOut}), 0);

        }
    });

    tl.add(TweenLite.to(image, 1, {scale: 0, opacity: 0, ease: Back.easeIn}), 1);
    tl.add(TweenLite.to(image, 2, {x: 0, rotation: 360, ease: Power1.easeInOut}), 0);

代码笔：

https://codepen.io/syncmaxim/pen/ZMexPZ?editors=0010

Answer 1

我很难理解你想要做什么，但我很确定你的代码比它需要的复杂得多。我猜测了你想要的效果类型，并创建了这个代码笔： https://codepen.io/GreenSock/pen/LJxgBv?editors=0010

var images = document.querySelectorAll("img"),
    delayTime = 2,
    animationTime = 1,
    tl = new TimelineMax({repeat:-1, delay:animationTime + delayTime, repeatDelay:delayTime});

TweenMax.set(images, {autoAlpha:0, scale:0});
//animate the first image in (don't put this in the timeline because it's different - there's no image showing behind it!)
TweenMax.to(images[0], animationTime, {autoAlpha:1, scale:1});

//now loop through the rest of the images and build their animations
for (var i = 1; i < images.length; i++) {
  tl.to(images[i], animationTime, {autoAlpha:1, scale:1}, (i-1) * (animationTime + delayTime));
  //after the new image animates in, we can hide the old one that's behind it (aids browser performance)
  tl.set(images[i-1], {autoAlpha:0, scale:0});
}

//now take the FIRST image and change the zIndex so that it's ON TOP of the last image, and animate it in. 
tl.fromTo(images[0], animationTime, {zIndex:100}, {autoAlpha:1, scale:1, delay:delayTime, immediateRender:false});

希望可以很容易地调整一些东西来获得你需要的东西。我添加了 cmets 来帮助解释发生了什么。

如果您有与 GSAP 相关的问题，请随时将其发布到专用论坛 https://greensock.com/forums。如果您可以提供一个示例代码笔来演示该问题，那将是最好的 - 这可以更快地进行故障排除。

补间快乐！

Answer 2

您在第一次迭代中隐藏的第一张图像，当您返回时，您不会再次显示它。在重置之前尝试再次显示它，(display:block) 是这样的：

var tl_2 = new TimelineLite({
                delay: 2,
                onComplete: function() {
                    alert("done");
                    $("#image").css("display", "block"); 
                    tl.restart();
                }
            });