새 단조로운 애니메이션을 클릭 할 때마다

Question

Spritely 스크립트를 사용하여 애니메이션을 적용하는 캐릭터를 내 페이지에 넣으려고합니다. 사용중인 스프라이트 시트에는 총 92 개의 프레임이 포함되어 있습니다. 애니메이션을 클릭 할 수있게하고 싶습니다.

처음으로 클릭하면 프레임 70까지 재생하고 중단합니다. 그런 다음 다음 번 클릭 할 때 애니메이션이 프레임 70에서 92까지 재생되고 중지되도록하고 싶습니다.

코드를 어떻게 작성해야합니까?

지금까지 애니메이션을 프레임 70까지 재생하고 정지 할 수있었습니다. 초급 웹 개발자 라해도 이것은 상당히 쉽습니다. 이 코드

$('#stacheguy2').click(function() { 
    $(this) 
    .sprite({fps: 30, no_of_frames: 92, play_frames: 70,}) 

}); 

, 당신은 문자를 클릭하면 프레임 1-70을 재생하고 정지 :

는 여기에 지금까지 무슨이다. 좋습니다. 그러나 다음에 클릭하면 프레임 70에서 픽업되어 다른 70 개의 프레임이 계속됩니다. 어떻게하면 애니메이션이 두 번째 클릭에서 프레임 70에서 92까지만 재생되도록 변경할 수 있습니까?

추신 : 나는 결국 캐릭터가 각 클릭에 대해 다른 프레임 시퀀스를 수행하도록하고 싶습니다.

내가 도와 주시면 감사하겠습니다. 감사!

Answer 1

테스트 용으로 92 이미지 PNG 파일을 찾는 데 어려움이있어서 더 짧은 파일로 처리해야했습니다. http://jsfiddle.net/Yhrbb/

예제의 코드는 다음과 같습니다 : 다음 동작하는 예제입니다

(function() { 
    var total = 92; 
    var play_on_click = 72; 
    var played = 0; 

    $('#fly').click(function() { 
     if (played >= total) { 
      return; 
     } 

     var current_play; 

     if (play_on_click > (total - played)) { 
      current_play = total - played; 
     } 
     else { 
      current_play = play_on_click; 
     } 

     played += current_play; 
     $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play}); 
    }); 
})(); 

당신이 그렇게 좋아 위해 우리는 일을 적응할 수 : 일단 우리가 도달

​(function() { 
    var total = 92; 
    var play_on_click = 72; 
    var played = 0; 

    $('#stacheguy2').click(function() { 
     if (played >= total) { 
      return; 
     } 

     var current_play; 

     if (play_on_click > (total - played)) { 
      current_play = total - played; 
     } 
     else { 
      current_play = play_on_click; 
     } 

     played += current_play; 
     $(this).sprite({fps: 30, no_of_frames: 92, play_frames: current_play}); 
    }); 
})(); 

주 총 프레임 수는 return이고 추가 클릭 수는 무시됩니다. if (played >= total)입니다. 그 시점에서 played을 재설정하거나 원하는 다른 작업을 수행 할 수 있습니다. 이것이 작동하지 않는다면 jsfiddle에서 사용할 PNG 파일이나 비슷한 파일을 게시하는 것이 좋습니다. http://jsfiddle.net/dNYks/

(function() { 
    var play_on_click = [32, 21, 10, 20]; 
    var play_index = 0; 

    $('#fly').click(function() { 
     var current_play = play_on_click[play_index]; 

     play_index++; 
     if (play_index > play_on_click.length-1) { 
      play_index = 0; 
     } 

     $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play}); 
    }); 
})(); 

우리는 당신의 마크 업을 일치하도록이 코드를 적용 할 수 있습니다 : 당신은 당신이 할 수있는 클릭 각각의 프레임 구성 수를 재생하고 싶다면

배열

와 프레임 수를 설정 그래서 같은 :

(function() { 
    var play_on_click = [32, 21, 10, 20]; 
    var play_index = 0; 

    $('#stacheguy2').click(function() { 
     var current_play = play_on_click[play_index]; 

     play_index++; 
     if (play_index > play_on_click.length-1) { 
      play_index = 0; 
     } 

     $(this).sprite(fps: 30, no_of_frames: 92, play_frames: current_play}); 
    }); 
})();