javascript - 如何 append 此SuperScrollorama补间时间轴

我正在尝试用SuperScrollorama制作枪的动画。这个想法是当用户向下滚动时，枪支会开火。这涉及到一些相当复杂的补间。

到目前为止，这是我所拥有的（*在Firefox中效果最佳）：

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

现在，扣动扳机并使锤子向后旋转，我需要使锤子旋转到零：-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网站上阅读了尽可能多的内容，并查看了各种代码段。仍然无法弄清楚。

最佳答案

因此，我看到这篇文章已有几个月的历史了，让我以目前还没有解决方案的事实作为开头，但是我觉得onComplete是处理它的方法。至少在google主机网站上存在一些问题，其中包含无效的DOM和资源无法正确加载。我建议使用JSFiddle与社区共享代码以进行帮助调试。从您的链接中获取标记后，我不得不修复一些损坏的div。我认为他们只是缺少结束标记（即</div>），但是您可以将两者进行比较以验证所有内容。另外，您似乎两次包含jQuery，然后再次检查它并在未找到的情况下进行加载。清理完所有这些之后，它似乎可以达到您期望的效果。不过，我相信您也正在寻找一种方法来使释放的触发器动起来，并在继续向下滚动时使撞针撞在撞针上。在尝试做非常相似的事情之后，我实际上偶然发现了您的问题。基本上，我只是尝试淡入一个元素，使其进入溢出DOM元素，然后在即将离开该元素时退出，以作为输入/离开时任何其他输入/输出补间的概念证明。因此，正如我最初所说的，我相信onComplete将是您想要的，但对于我想做的事情，可能不会。仍然不确定，也许其他人会对此感兴趣。无论哪种方式，下面都有我的想法。不确定您需要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)

关于javascript - 如何 append 此SuperScrollorama补间时间轴，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18476800/