Как добавить эту временную шкалу анимации 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 - это способ справиться с этим. Были некоторые проблемы, по крайней мере на хост-сайте google, с недопустимым DOM и ресурсами, которые не загружаются должным образом. Я рекомендую использовать JSFiddle для обмена кодом с сообществом для отладки справки. Схватив разметку из вашей ссылки, я дал пару сломанных div, которые мне пришлось исправить. Я думаю, что им просто не хватало закрывающих тегов (т. Е. </div>), но вы можете разграничить их, чтобы проверить все. Кроме того, похоже, что вы включаете jQuery дважды, а затем даже проверяете его снова и загружаете, если не нашли. После очистки все это, похоже, работает так, как вы ожидали. Хотя, я считаю, вы также хотите найти способ анимировать спусковой механизм, который будет выпущен, и зажать молот на стреляющем штыре, пока вы продолжаете прокручивать вниз. Я фактически наткнулся на ваш вопрос, пытаясь сделать что-то очень похожее. В основном я просто пытаюсь вытеснить элемент, поскольку он входит в элемент DOM переполнения, а затем возвращается, когда он собирается оставить элемент в качестве доказательства концепции для любых других в/из подростков при входе/выходе. Поэтому, как я сказал изначально, я считаю, что onComplete будет тем, что вы хотите, но далеко не тем, что я пытаюсь сделать. Все еще не уверен, может быть, некоторые другие будут перекликаться с этим. В любом случае, есть моя идея ниже. Не уверен, что вам нужен метод fromTo, поскольку я заменил его только методом to, так как его состояние «from» является правильным из инициализации страницы. Если вы можете узнать, почему onComplete стреляет в нагрузку и решит, что вы должны быть хороши, хотя. Надеюсь, это, по крайней мере, даст немного больше информации, поскольку никто больше не дал ответа через почти три месяца. Если вы do все это получилось, было бы здорово, если бы вы могли обновить это сообщение, чтобы показать, какова была решимость.

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)