Question

我对使用Scrollmagic的GSAP很新，试图在一个场景中做多个补间但却无法弄清楚我是怎么做到这样的3个场景。

            // init controller
            var controller = new ScrollMagic.Controller();

            // build scene
            var scene1 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate1", 0.4, {
                opacity: 1, 
                left: 0
            })
            .reverse(false)

            var scene2 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate2", 0.4, {
                opacity: 1, 
                left: 0,
                delay: .4
            })
            .reverse(false)

            var scene3 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate3", 0.4, {
                opacity: 1, 
                left: 0,
                delay: .8
            })
            .reverse(false)

            //.addTo(controller);
            controller.addScene([
                scene1,
                scene2,
                scene3
            ]);

有没有办法简化这段代码？我想增加更多，但我觉得有一个简短的方法来写这个？

提前致谢！

最终代码

            var timeline = new TimelineMax();

            var tween1 = TweenMax.to("#animate4", .5, {
                opacity: 1,
                top: 0
            });
            var tween2 = TweenMax.to("#animate5", .5, {
                opacity: 1,
                top: 0
            });
            var tween3 = TweenMax.to("#animate6", .5, {
                opacity: 1,
                top: 0
            });

            var scene = new ScrollMagic.Scene({
                triggerElement: "#trigger2"
            });

            //.addTo(controller);
            //controller.addScene([
            //  scene4
            //]);

            timeline.add(tween1).add(tween2).add(tween3);
            scene.setTween(timeline)
            scene.addTo(controller);

Answer 1

您可以使用TimeLine将多个补间添加到场景

var timeline = new TimelineMax();
var tween1 = TweenMax.from("#animate1", 1, {opacity: 1, left:0});
var tween2 = TweenMax.to("#animate2", 1, {opacity:1, left:0, delay:0.4});

timeline.add(tween1).add(tween2);

scene.addTween(timeline);

如果您希望一个接一个地显示多个项目，可以使用stagger

TweenMax.staggerTo(".myclass", 0.5, {opacity:0, y:-100, ease:Back.easeIn}, 0.1);

一个场景中的多个补间

1 个答案: