使用JQuery從PSD圖層創建動畫幀

Question

我有一個PSD文件，其中有一些圖層是動畫的幀。我如何使用JQuery/JavaScript創建一個動畫？

我需要將每個圖層保存爲一個單獨的圖像，有沒有辦法讓一個圖像有多個圖層動畫？爲了澄清，我不希望實際的圖像移動，我只是想要顯示不同的圖層，就好像它們是動畫的幀一樣。這是用JavaScript完成的標準方式是什麼？

謝謝！

Answer 1

這是演示javascript定時器+個人圖像方法的小提琴。

小提琴：http://jsfiddle.net/ZVFu8/2/

基本的想法是創建與您的圖像的名稱的數組。

var img_name_arr = []; 
var img_name_root = "anim-"; 
var img_name_ext = ".gif"; 
var num_images = 12; 

// init arr of img names assuming frames are named [root]+i+[extension] 
for (i = 0; i<=num_images; i++) { 
    img_name_arr.push(img_name_root + i + img_name_ext); 
}  

對於動畫，請使用setInterval（）。在JavaScript中，間隔定期執行。您指定要執行的代碼以及代碼運行的時間間隔（以毫秒爲單位）。

每次調用間隔時，都可以通過將image標記的「src」屬性設置爲image_name數組中的下一個索引來顯示新圖像。

// Create an interval, and save a handle to the interval so it can be stopped later 
anim_interval = setInterval(function() { 
    $("#player").attr("src", s + img_name_arr[(anim_frame++ % num_images)+1]); 
}, frame_interval); 

根據您的動畫的長度和每個圖像文件的大小，可能需要通過預加載這些圖像來優化此圖像。在動畫開始之前，您可以爲每個圖像創建一個img標籤並隱藏它。然後，而不是更改「src」屬性來更改圖像，而是實際上隱藏當前圖像並取消隱藏之前圖像位置中的下一個圖像。

以下是完整的代碼，如果你想在本地運行此：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<a id="anim_control" href="">Start</a> 
<img id="player" src="" /> 


<script> 
var s = "http://" + atob("YmVucmlkb3V0LmNvbQ==") + "/"; 
var img_name_arr = []; 
var img_name_root = "anim-"; 
var img_name_ext = ".gif"; 
var num_images = 12; 

var framerate = 1; // Desired frames per second 
var frame_interval = 1000/framerate; 


$(function(){ 
    // Document is ready 
    // init arr of img names 
    for (i = 0; i <= num_images; i++) { 
     img_name_arr.push(img_name_root + i + img_name_ext); 
    } 


    var anim_interval = null; 
    var playing = false; 
    var anim_frame = 0; 

    // Define an interval that will execute every [frame_interval] milliseconds 
    $("#anim_control").on("click", function(e) { 
     e.preventDefault(); 
     if (playing == true) { 
      playing = false; 
      $(this).html("Start"); 
      clearInterval(anim_interval); 
     } else { 
      playing = true; 
      $(this).html("Stop"); 
      anim_interval = setInterval(function() { 
       //console.log(s + img_name_arr[(anim_frame++ % num_images)+1]); 
       $("#player").attr("src", s + img_name_arr[(anim_frame++ % num_images)+1]); 
      }, frame_interval); 
     } 
    }); 
}); 
</script> 

<style> 
#player { 
    width: 320px; 
    height: 240px; 
    border: 1px solid #000; 
} 
</style>