Objota O mundo orientado a objetos

Animação com JavaScript e imagens Sprite

Posted on junho 14, 2011

Olá a todos caros leitores do objota, antes de mais nada gostaria de dizer que tem sido difícil arrumar tempo para postar, devido a alguns projetos. Mas finalmente consegui arrumar um tempo para me dedicar a mais um artigo no objota.

Neste artigo vamos falar sobre animação utilizando imagens sprite e javascript. Recentemente o site de buscas google.com.br utilizou no lugar de seu logo uma animação muito legal para homenagear uma artista - que não me lembro qual. Mas enfim, fiquei realmente intrigado com aquela bela animação e fui atrás de saber como funcionava aquilo. A base da animação utiliza um conceito bem conhecido: imagens sprite, muito utilizadas em layouts de site para maximizar o carregamento das páginas web. Seguindo esta mesma linha de raciocínio criei o tutorial abaixo.

Primeiramente vamos definir o que é uma animação. Uma animação é uma sequencia de imagens mostradas a uma velocidade que dá a ilusão de existir algo animado, mesmo com desenhos e imagens estáticas.

Sabendo disso, para dar continuidade ao artigo precisamos de uma seqüência de imagens, e para que nós possamos utilizá-la ela precisa ser transformada em um sprite, ou seja, unir todas em uma única imagem. Abaixo segue a imagem que utilizei:

Como pode ver a imagem acima é um sprite de uma seqüência de imagens para animação. Sabendo disso fica claro que para animar esta imagem precisamos movimentar o seu background-position. E o javascript será a ferramenta que iremos utilizar para fazer esta animação.

Eu mesmo implementei um objeto que chamei de MovieClip, não querendo irritar os "flasheiros", hehe.

Dica: Caso ainda não saiba como implementar objetos em javascript veja este artigo.

movie-clip.js

window.MovieClip = function(posx){
 var that = this;
 this.count = 0;
 this.posx = posx || [];
 this.interval = 0;

 this.play = function(){
 that.interval = window.setInterval(function(){
 var s = document.getElementById('sprite');
 s.setAttribute('style','background-position: -'+that.posx[that.count]+'px 0px;');
 that.count++;
 if(that.count >= that.posx.length)that.count = 0;
 }, 300);
 };

 this.stop = function(){
 window.clearInterval(that.interval);
 that.count = 0;
 that.interval = 0;
 };

 this.isRun=function(){
 if(that.interval > 0)return true;
 return false;
 };
};

exemplo.html

<html>
<head>
<title>Sprite</title>
<script type="text/javascript" src="movie-clip.js"></script>
<style type="text/css">
#sprite{
 width: 59px;
 height: 37px;
 background-image: url(RushRun.gif);
 background-repeat: no-repeat;
 background-color: #fff;
}
</style>
</head>
<body>

<div id="sprite"></div>
<input type="button" value="play" id="control"/>

<script>
/*
Inicio o objeto passando um array de valores do eixo X da imagem
iniciando de zero
*/
var filme = new MovieClip([0,59, 117, 177, 235, 294]);
var bt = document.getElementById('control');

bt.onclick=function(){
 if(!filme.isRun()){
 filme.play();
 bt.setAttribute('value', 'stop');
 }
 else{
 filme.stop();
 bt.setAttribute('value', 'play');
 }
};
</script>
</body>
</html>

Veja que neste exemplo de implementação você deve fornecer um array contendo as coordenadas para a animação do sprite. Também deve configurar o número de frames por segundo.

Isso também nos leva a um outro assunto, a qualidade da animação, assim como dos vídeos, depende muito do número de frames por segundo que ele exibe. Quanto maior a quantidade de frames por segundo melhor será a qualidade do vídeo ou animação. Claro, sem apelar para qualidade da imagem e etc.

Bom, este foi meu artigo sobre animação com javascript utilizando sprite. Porém com CSS 3 e HTML 5 a capacidade de criação e os feitos com javascript serão ainda mais incríveis, realmente não vejo a hora destes novos formatos serem adotados e consolidados.

Comente! Qualquer dúvida ou sugestão a respeito deste artigo! Bons estudos.

arquivos para download: js-sprite

Posted by Rodrigo Ireno

Comentários (10) Trackbacks (0)
  1. Muito legal mas não funciona no IE9. :-)
  2. Interessantíssimo. Disponibilizar um exemplo, em funcionamento, seria bem interessante.
  3. Interessante, parabéns.
    Um abraço.

    PS: Me senti na obrigação de comentar depois de ler alguns comentários aqui postados. Você coloca um exemplo rico, com boa vontade e sem ganhar nada e ainda assim aparece gente reclamando e exigindo. Por favor pessoal.

  4. Valeu a força aí amigo! e aproveite o conteúdo. =]
  5. parabens rodrigo!!!
    concordo com o willian! vamos parar de exigir e começar a contribuir.
    Vlw
  6. Fala, o ajuste pra não ter problema com o ie9:

    s.setAttribute(‘style’,’background-position: -’+that.posx[that.count]+’px 0px;’);
    por
    s.style.backgroundPosition = ‘-’+that.posx[that.count]+’px 0px’;

    abçs

  7. Parabéns cara, muito bom mesmo!
  8. cara estou conhecendo agora essa linguagem!!! desculpe a pergunta mais qual o editor ou programa onde eu faço esse arquivo .js????

Leave a comment

Sem trackbacks