0

有没有办法让用户滚动到某个点，元素淡入，然后播放动画（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'}})
                    ])
4

1 回答 1

0

这看起来真的太复杂了。

我对此的思考过程，你有一个做你的初始动画的别针。

onComplete 的那个动画你直接添加你想要发生的补间？

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

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

于 2013-10-15T17:22:26.593 回答