2

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

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

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

现在我已经扣动了扳机并且锤子向后旋转，我需要使锤子在达到旋转：-25 后快速旋转：0。我只是不知道如何附加这个时间线。

这是我的脚本：

<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网站上阅读了尽可能多的内容，并查看了各种代码片段。还是想不通。

4

1 回答 1

0

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

JSFiddle 链接

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)
于 2013-11-26T21:09:17.190 回答