新的精灵动画每次点击

Question

我想在我的页面上使用Spritely脚本进行动画处理。 我使用的精灵表共包含92帧。 我希望动画可以点击。

第一次点击时，我想让它播放到第70帧并停下来。 然后，下次单击它时，我想让动画从第70帧到第92帧播放并停止。

我该如何编写代码？

到目前为止，我可以让动画播放到第70帧并停止播放。即使作为初学Web开发人员，这也相当容易。

这是我到目前为止有：

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

}); 

有了这个代码，当你点击的字符，它起着框架1-70和停止。那很好。但是，下次您点击它时，会从第70帧开始并继续播放70帧。我怎样才能改变这一点，以便动画只在第二次点击时播放第70帧到第92帧？ PS：我想最终让角色为每次点击执行不同的帧序列。

如果你能帮助我，我会很感激！谢谢！

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}); 
    }); 
})(); 

注意，一旦我们到达我们只是在if (played >= total)上忽略了return的额外点击。您可以在此时重置played或执行任何您想要的操作。如果这不起作用，您是否介意发布您的PNG文件或用于jsfiddle的类似长文件。

配置帧的数量与阵列

如果你想打每帧的配置数量的点击，你可以这样做：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}); 
    }); 
})();