Question

有没有办法让用户滚动到某一点，一个元素淡入，之后播放动画（X2）（无用户输入）之后滚动会触发更多动画，但只有在动画（X2）播放完毕后才能触发动画。

var controller = $.superscrollorama({
            triggerAtCenter: false
        });
            // set duration, in pixels scrolled, for pinned element
                var pinDur = 2800;

                // create animation timeline for pinned element
                var pinAnimations = new TimelineLite();
                pinAnimations
                    .append([
                        TweenMax.to($('#mouse_walk'), 5, {css:{opacity: 1},
                            onComplete: function(){
                                $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '977px', width: '1080px', left: '49.5%', top:'370px'}, 200, function(){
                                    $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                        $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '995px', width: '1100px', left: '49.3%', top:'360px'}, 200, function(){
                                            $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                setTimeout(function() {
                                                      $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '977px', width: '1080px', left: '49.5%', top:'370px'}, 200, function(){
                                                          $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                              $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '995px', width: '1100px', left: '49.3%', top:'360px'}, 200, function(){
                                                                  $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                                    })
                                                                })
                                                            })
                                                        })
                                                    }, 800);
                                                    })
                                                })
                                            })
                                        });
                                    }
                                }
                            )
                        ])
                    .append([
                        TweenMax.to( $('#mouse_walk_hell'), 5, {css:{opacity: '1'}})
                    ])

Answer 1

这看起来真的太复杂了。

我的思考过程中你有一个引脚来完成你的初始动画。

onComplete，你直接添加想要发生的补间吗？

您可以在onComplete方法中嵌套另一个timelineLight，这样您就可以对这些动画进行排序，而无需使用大量嵌套的JQuery动画。

我也强烈建议不要将greensock和JQuery动画混合在一起，它们给我带来了噩梦。

Superscrollorama，TweenMax进行动画播放，然后恢复滚动

1 个答案: