jQuery.spriteMe() V1.3 03-07-2015

Play Stop restart reverse 2 fps 6 fps 12 fps 24 fps maxframe 4 maxframe false loop true loop false gotoframe 6 gotoframe 0

Ce plugin est destiné à l'animation de sprite en css. Concretement il s'agit de changer la propriété "background-image" d'un élément HTML en utilisant requestAnimationFrame. Les sources sont aussi sur GitLab.

Utilisation

Définir une div avec width et height plus un background-image. la div affichera donc la 1er frame du sprite.

          
#cheval{
  width: 288px;
  height: 254px;
  background-image: url(../images/cheval.jpg);
}
          

Puis ajoutez jQuery et le plugin spriteMe.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>      
<script src="js/libs/jquery.spriteme.js" type="text/javascript"></script>    
        

Enfin, initialisez le plugin.

$(function() {   
  $("#cheval").spriteMe();
});
        

Ici la demo utilise les paramètres suivants:

          
//pour le css
width: 144px;
height: 127px;

//et pour le JS
$("#cheval").spriteMe({
  loop:true,
  fps: 12,
  pixelratio: 2,
});
          
        

Options

Le plugin possède plusieurs options. Voici la liste avec les valeurs par défaut.
Remarque :Le plugin compte les images à partir de 0.

$(function() {  

  $("#cheval").spriteMe({
    fps: 12,
    loop: false,
    autoplay: true,
    gotoframe:false,
    reverse:false,
    maxframe: false, 
    pixelratio: 0,
    complete: function(){  
      console.log('This is the end.');
    }

});
        

• fps: Le nombre d'image par seconde. INT
• loop: L'animation doit-elle jouer en boucle? BOOLEAN
• autoplay: Faut-il vraiment l'expliquer? BOOLEAN
• gotoframe: Permet de sauter directement à une image. La permiere image est 0. INT
• reverse: Joue l'animation à l'envers. BOOLEAN
• maxframe: Défini l'image de fin de l'animation. Maxframe compte a partir de 0 (voir la fin de la page). Mettre sur FALSE pour désactiver. INT ou BOOLEAN
• pixelratio: Défini si la taille du sprite est X fois plus grande que la taille du container ( Pour les device dont le pixelratio est supperieur à 1 )
• complete: Exécute un bloc de code quand l'animation arrive à la fin ET que loop = false.

Méthodes | API

Les méthodes peuvent étre appellées pendant la lecture de l'animation, ou non.

  // les deux methodes ne sont pas identiques, play() est a utiliser apres un stop().
  // si loop = false et que l'animation est arrivée au bout; alors il faut utiliser resume()
  $("#cheval").spriteMe("play");
  $("#cheval").spriteMe("resume");
  
  // stop l'animation
  $("#cheval").spriteMe("stop");
  
  //relance l'animation depuis le debut
  $("#cheval").spriteMe("restart");
  
  //change les fps : INT
  $("#cheval").spriteMe("fps",30);
  
  //saute vers la frame : INT
  $("#cheval").spriteMe("gotoframe",30);

  // inverse le sens de lecture du sprite
  $("#cheval").spriteMe("reverse");

  // inverse le sens de lecture du sprite
  $("#cheval").spriteMe("setreversestate", false);

  // change le nombre de frame de l'animation INT
  $("#cheval").spriteMe("setmaxframe",42);

  // supprime la limitation de frame: BOOLEAN
  $("#cheval").spriteMe("setmaxframe",false);
  
  // change l'etat de la répétition automatique BOOLEAN
  $("#cheval").spriteMe("setloop",false);
        

Le fichier image

Le fichier image peut avoir une ou plusieurs colonnes, peut importe. le sprite sera affiché de gauche à droite, ligne par linge. Le plugin calcule seul les dimentions de l'image et donc le nombre de frame total dans l'animation.

Ici, nortre image peut contenir 15 frame. Mais notre animation n'en posséde que 14. Il faut donc utiliser maxframe.
Attention: maxframe compte a partir de 0. Il faudra donc définir maxframe sur 13 et non pas 14.