Question

我正试图用SuperScrollorama动画枪。这个想法是当用户向下滚动时枪会发射。这涉及一些相当复杂的补间。

这是我到目前为止（*在Firefox中效果最好）：

https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/index.html

现在我已经拉动了扳机并且锤子向后旋转，我需要使锤子在旋转时快速旋转：0：-25。我只是无法弄清楚如何追加这个时间表。

这是我的剧本：

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();

        controller.addTween(
            '#gun',
            (new TimelineLite())
                .append([
                    TweenMax.fromTo($('#hammer'), 1, 
                        {css:{rotation: 0}, immediateRender:true}, 
                        {css:{rotation: -25}, ease:Quad.easeInOut}),
                    TweenMax.fromTo($('#trigger'), 1, 
                        {css:{rotation: 0}, immediateRender:true}, 
                        {css:{rotation: 40}, ease:Quad.easeInOut})
                    ]),
                    500, // scroll duration of tween
                    200); // offset?
    });
</script>

我很感激任何人都能给我的帮助。我在Superscrollorama网站上尽可能多地阅读，并查看了各种代码段。仍然无法弄明白。

Answer 1

所以我看到这篇文章已经有几个月了，让我先说明我还没有解决方案，但我觉得onComplete是处理它的方法。至少在谷歌主机网站上存在一些问题，其中DOM和资源无法正确加载。我建议使用JSFiddle与社区共享代码以进行帮助调试。从你的链接中抓取标记给了我一些我必须修复的破坏的div。我认为他们只是缺少结束标签（即</div>），但你可以将两者区分开以验证它们。此外，它看起来像你包括jQuery两次，然后甚至再次检查它并加载如果没有找到。清洁完所有后，它似乎按照您的预期执行。尽管如此，我相信你也想找到一种方法来动画释放触发器，并在你继续向下滚动时敲击撞针。在尝试做一些非常相似的事情后，我偶然发现了你的问题。基本上我只是试图淡化一个元素，因为它进入溢出的DOM元素，然后在它进入/离开时将元素作为任何其他输入/输出补间的概念证明时退出。因此，正如我最初所说，我相信完全将是你想要的，但不是因为我想要做的事情。仍然不确定，也许其他人会对此感兴趣。无论哪种方式，下面都有我的想法。不确定你需要fromTo方法，因为我只用to方法替换它，因为它的“from”状态适合于页面的初始化。如果你能找出为什么onComplete在加载时触发并解决你应该是好的。希望这至少可以提供更多的见解，因为近三个月后没有其他人给出答案。如果你做让这一切得到解决，那么如果你能更新这篇文章以显示解决方案的话会很棒。

JSFiddle Link

CSS：

body{
    background: url(https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/plus_yellow.png);
    background-color: #FFFF00;
    background-repeat:repeat;
    height: 3000px;
}

#gun{
    position: fixed;
}

#body{
    z-index: 2;
    position: absolute;
    left: 0px;
    top: 100px;
}

#slide{
    position: absolute;
}

#slide1{
    z-index: 3;
    position: absolute;
    left: 91px;
    top: 7px;
}

#slide2{
    z-index: 1;
    position: absolute;
    left: 735px;
    top: 95px;
}

#barrel{
    z-index: 0;
    position: absolute;
    left: 371px;
    top: 25px;

}

#hammer{
    z-index: 0;
    position: absolute;
    left: 63px;
    top: 60px;

}

#trigger{
    z-index: 0;
    position: absolute;
    left: 345px;
    top: 64px;

}

HTML：

<div id="screen1">
<div id="gun">
    <img id="body" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/body.svg" alt="body" />
    <div id="slide">
        <img id="slide1" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide1.svg" alt="slide1" />
        <img id="slide2" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide2.svg" alt="slide2" />
    </div>
    <div>
        <img id="barrel" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/barrel.svg" alt="barrel" />
        <img id="hammer" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/hammer.svg" alt="hammer" />
        <img id="trigger" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/trigger.svg" alt="trigger" />
    </div>
</div>

JS：

var controller = $.superscrollorama(),
handleComplete = function(elem) {
    console.log('complete', elem);
    $('#'+elem).css('rotation', 0);
};

controller.addTween($('#gun'),
    (new TimelineLite())
        .append([
            TweenMax.to($('#hammer'), 1, 
                        {css:{rotation: -25}, onComplete:handleComplete('hammer'), ease:Quad.easeInOut}),
            TweenMax.to($('#trigger'), 1, 
                        {css:{rotation: 40}, onComplete:handleComplete('trigger'), ease:Quad.easeInOut})
            ]),
            500, // scroll duration of tween in pixels
            200); // offset (helps with timing when needed)

如何附加此SuperScrollorama补间时间轴

1 个答案: