如何添加此SuperScrollorama補間時間軸

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>），但您可以區分兩者來驗證所有結果。此外，它看起來像你包括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)