javascript - 使用 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});

希望可以轻松地进行调整以获得您所需要的内容。我添加了评论来帮助解释发生了什么。

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

补间快乐!