3

我正在尝试使用 ScrollMagic 和 GSAP 重建此介绍效果：http://airnauts.com注意介绍“幻灯片”（带有文本）在滚动时如何显示和消失。

基本上，我已经为动画设置了一个舞台控制器、一个场景（包含 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);

回顾一下：如何在滚动时设法呈现不同的场景并在它们之间通过漂亮的过渡进行切换？

4

2 回答 2

4

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

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

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() 方法使这更加简洁。
来自 GSAP 文档：

将 TweenLite.to() 补间添加到时间线的末尾（或使用“位置”参数的其他地方） - 这是一种方便的方法，可以完成与 add( TweenLite.to(...) ) 完全相同的事情，但使用更少的代码。

因此，这将使其成为适合您目的的最佳 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});
于 2015-02-04T09:13:59.997 回答
1

好吧，所以我自己想通了。您必须使用 TimelineMax（或我猜是 Lite）并相对设置不同的场景移动，使用延迟如下：a

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

            var pin = new ScrollScene({
                triggerElement: '.hero-unit',
                triggerHook: 0,
                duration: 2000
            }).setPin('.hero-unit').setTween(tl).addTo(controller);
于 2015-02-03T19:37:29.323 回答