Utilisation de JQuery pour créer des cadres d'animation à partir de couches PSD

Question

J'ai un fichier PSD avec un groupe de couches qui sont des cadres pour une animation. Comment puis-je créer une animation avec JQuery/JavaScript? Dois-je sauvegarder chaque calque en tant qu'image distincte? Y a-t-il un moyen d'animer une image avec plusieurs calques? Pour clarifier, je ne veux pas que l'image réelle bouge, je veux juste que les différentes couches soient affichées comme si elles étaient des images d'une animation. Quelle est la manière standard de faire cela avec JavaScript?

Merci!

Answer 1

Voici un violon qui montre l'approche de la minuterie javascript + images individuelles.

Fiddle: http://jsfiddle.net/ZVFu8/2/

L'idée de base est de créer un tableau avec les noms de vos images.

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

Pour l'animation, utilisez setInterval(). En javascript, un intervalle s'exécute périodiquement. Vous spécifiez le code à exécuter et l'intervalle auquel le code doit être exécuté (en millisecondes).

Chaque fois que vous appelez votre intervalle, vous pouvez afficher une nouvelle image en définissant l'attribut "src" de la balise image sur l'index suivant dans le tableau nom_image.

// 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); 

En fonction de la durée de l'animation est et la taille de chaque fichier d'image est, il peut être nécessaire d'optimiser cela en pré-chargement de ces images. Avant le début de l'animation, vous pouvez créer une balise img pour chaque image et la masquer. Ensuite, au lieu de modifier l'attribut "src" pour changer l'image, vous cacheriez l'image actuelle et cacheriez l'image suivante à la place de l'image précédente.

Voici le code complet si vous souhaitez exécuter ce local:

<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>