一个场景中如何使用多个Tween动画

Question

一个场景中如何使用多个Tween动画

5

我对使用Scrollmagic和GSAP还不是很熟悉，尝试在一个场景中进行多个tween动画，但无法解决问题，最终只得像这样创建了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);

- Ken Ryan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kokodoko · Accepted Answer

您可以使用时间轴（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);