javascript - 使用 ScrollMagic 为序列中的多个场景设置动画

Question

我正在尝试使用 ScrollMagic 和 GSAP 重建这个介绍效果:http://airnauts.com请注意介绍“幻灯片”(带有文本)在滚动时是如何一个接一个地显示和消失的。

基本上，我已经设置了一个舞台 Controller 、一个场景(包含 div - '.hero-unit')和一些动画补间。但是，我无法掌握如何按这样的顺序为每张幻灯片(总共三张)制作动画:

1. 您进入网站并开始滚动。
2. 第一张幻灯片是动画的(使用 staggerFromTo 方法)。
3. 当幻灯片完全动画后，将其不透明度降低回 0(或将其移出屏幕或其他)。
4. 显示第二张幻灯片，如 2 中所示。
5. 与 3 相同。 等等。

我尝试了在互联网上设法找到的所有解决方案。我尝试使用“TimelineMax”，尝试在使用 onComplete 完成动画后隐藏幻灯片，但似乎没有任何效果。这是我到目前为止的代码:

var pinOrigin = {
                opacity: 0
            };
            var pinEnd = {
                opacity: 1,
                yoyo: true,
                ease: Back.easeOut
            }

            var tl = TweenMax.staggerFromTo('.hero-unit .scene:first-of-type', 1, {opacity:0}, {opacity: 1});

            var pin = new ScrollScene({
                triggerElement: '.hero-unit',
                triggerHook: 'onLeave',
                duration: 1000
            }).setPin('.hero-unit').setTween(tl).addTo(controller);

回顾一下:人们如何设法在不同的场景上演并在滚动时通过漂亮的过渡在它们之间切换？

Answer 1

改进 your answer我想补充一点，您可以将补间连续添加到时间线，它们将自动添加到时间线的末尾。

因此，您的动画代码的更好方法是:

var tl = new TimelineMax()
    .add(TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 1}))
    .add(TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 0}))
    .add(TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1}))
    .add(TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0}))
    .add(TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1}))
    .add(TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0}));

如果您想随时添加任何内容，这样代码更易于管理。 有关更多信息，请查看 http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

如果您只想在时间线末尾添加一个.to 补间，您可以使用TimelineMax.to() method 使其更加简洁。 .
来自 GSAP 文档:

Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.

因此这将使它成为最适合您目的的 GSAP 动画代码:

var tl = new TimelineMax()
    .to('.hero-unit .scene:first-of-type', 1, {opacity: 1})
    .to('.hero-unit .scene:first-of-type', 1, {opacity: 0})
    .to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1})
    .to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0})
    .to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1})
    .to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0});