基於jQuery圖片框架的英雄動畫無法正常工作

我試圖通過關鍵事件來創建一個英雄（從MK爬行動物）向後，向前，鴨等等。但是當我嘗試迭代一定數量的圖片來完成這個動作時，它有點兒缺陷：S有沒有其他好方法？或者我做錯了什麼？基於jQuery圖片框架的英雄動畫無法正常工作

所有的運動都有點糾結：/有沒有辦法讓它平穩移動？照片效果不佳，有時會跳過幾張照片，或者在同一張照片上漫步幾秒鐘。

這裏是我的代碼，我會在相同的HTML添加所有：

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <style> 
     #reptile_wrapper { 
      position:relative; 
     } 

    </style> 
</head> 
<body> 

    <div id="reptile_wrapper"> 
     <img src="img/0.png"/> 
    </div> 

    <script> 

     /* Preload all the images and gifs */ 
     var img_list, img_count, base_str, img_obj, i, prefix_str, suffix_img_str, suffix_gif_str; 

     img_list = [ 'd01', 'd02']; 
     gif_list = ['reptile_walk_forward', 'reptile_walk_backward', 'reptile_idle']; 
     prefix_str = 'img/'; 
     suffix_img_str = '.png'; 
     suffix_gif_str = '.gif'; 

     img_count = img_list.length; 
     for (i = 0; i < img_count; i++) { 
      base_str = img_list[ i ]; 
      img_obj  = new Image(); 
      img_obj.src = prefix_str + base_str + suffix_img_str; 
     } 

     gif_count = gif_list.length; 
     for (i = 0; i < gif_count; i++) { 
      base_str = gif_list[ i ]; 
      img_obj  = new Image(); 
      img_obj.src = prefix_str + base_str + suffix_gif_str; 
     } 
     /* End of preloading images and gifs */ 

     var duckImages = ["d01", "d02"]; 
     var posx = 10; 

     reptileIdleAnimation(); 

     $('body').keydown(function(event) { 
      switch(event.which) { 
       // D 
       case 68:      
        posx += 5; 
        $("#reptile_wrapper img").attr('src', 'img/reptile_walk_forward.gif') 
         .parent().css({left: posx+'px'});     
       break; 
       // A  
       case 65: 
        posx -= 5; 
        $("#reptile_wrapper img").attr('src', 'img/reptile_walk_backward.gif') 
         .parent().css({left: posx+'px'}); 
       break; 
       // S 
       case 83: 
        $.each(duckImages, function(index, value) { 
         var myAnim = setInterval(function(){ 
          $("#reptile_wrapper img").attr('src', 'img/' + value + '.png') 
           .parent().css({"top": "40px"}); 
          clearInterval(myAnim); 
         }, 200); 
        }); 
       break; 

       default: 
        reptileIdleAnimation(); 
       break; 
      } 


     }) 
     .keyup(function() { 
      reptileIdleAnimation(); 
     }); 

     function reptileIdleAnimation() { 
      $("#reptile_wrapper img").attr('src', 'img/reptile_idle.gif'); 
     } 
    </script> 
</body> 
</html>

感謝。

來源

2013-12-15 user3078876

我推薦的第一件事是預載所有的圖片。

var img_list, img_count, base_str, img_obj, i, prefix_str, suffix_str; 

img_list = [ 'one', 'two', 'three' ]; 
prefix_str = 'http://myserver.com/images/'; 
suffix_str = '.png'; 

img_count = img_list.length; 
for (i = 0; i < img_count; i++) { 
    base_str = img_list[ i ]; 
    img_obj  = new Image(); 
    img_obj.src = prefix_str + base_str + suffix_str; 
}

當然，您需要用您自己的值替換img_list，prefix_str和suffix_str。一旦圖像預加載，任何網絡延遲將被刪除，並且您的動畫應該更平滑。讓我知道如果這還不夠:)

來源

2013-12-15 06:44:39

決定直接使用GIF動畫，事情是，它是偉大的工作，但動畫是波濤洶涌，爲什麼會發生？是因爲那個？我的意思是我需要預加載動畫GIF？感謝您的回覆:) – user3078876

已更新我的代碼，以便您可以瞭解它的進展情況......但動畫仍然變得不穩定，是因爲我沒有使用img_obj.src？：/ – user3078876

你在那裏？：'（ – user3078876

基於jQuery圖片框架的英雄動畫無法正常工作

回答

相關問題