Biblioteca de animação jQuery.spritely

Como podemos animar sprites mediante JavaScript...e um mínimo de CSS.

Por Jaime Peña Tresancos - Tradução CRV


Publicado em: 24/6/13
Valorize este artigo:
 
Em nosso artigo anterior Animações de sprites mediante CSS3 e JavaScript: havíamos comentado as possibilidades de criar animações de sprites fundamentalmente com estilos CSS3 e algo de JavaScript. Aqui, vamos vê-lo de uma nova perspectiva –justamente a inversa-, com algumas novas possibilidades que no momento não são tão fáceis –ou não são em absoluto- de implementar com estilos.

Estas duas visões vão nos oferecer alternativas válidas em muitos casos e ,em outros outros, umas oferecem vantagens sobre as outras, que cada programador deverá ponderar, fundamentalmente no que se refere ao âmbito das próprias capacidades de animação, da otimização do código e do peso de nossas páginas.

Neste artigo falaremos de:

  • Animação simples de sprites
  • Animação com movimentos aleatórios do sprite
  • Controle da animação
  • Resposta do sprite ante cliques sobre o corpo do documento
Comentaremos a possibilidade de animar sprites mediante JavaScript e um mínimo de CSS. Trata-se da biblioteca jQuery.spritely que facilita a animação de sprites; está baseada em jQuery e tem diversas opções avançadas, dentro de sua simplicidade de uso. O lugar de Internet de referência e download é: www.spritely.net


 

Funcionalidade básica de animação

Se baseia no uso do método sprite(), que se associa a um elemento div no corpo do documento HTML, onde será mostrado o sprite.

Temos de dotar o elemento de um certo estilo div para que cumpra as condições de conteiner do sprite e isso é tudo.

Vejamos a Listagem 1 que passaremos a comentar.

Listagem 1: Animação simples de um sprite mediante o método sprite()

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Animated Sprite Sheet (Spritely-jQuery)</title>

<script src="scripts/jquery-1.8.3.min.js"></script>
<script src="scripts/jquery.spritely-0.6.1.js"></script>

<style>
#cartero {
background: transparent url(carteiro.png) 0 0 no-repeat;
position: absolute;
width: 70px;
height: 112px;
}
</style>

<script>

$(function () {
$('#carteiro')
.sprite({ fps: 24, no_of_frames: 8 })
});

</script>
</head>
<body>
<div id="carteiro"></div>
</body>
</html>

Posição dosprite animado na posição fixada pelo elemento div

As características do sprite utilizado são:

  • Número de filas com imagens: 1
  • Número de imagens: 8
  • Largura de cada imagem: 72px
  • Altura das imagens: 112px
Com respeito ao estilo do elemento div:
  • Se carrega a imagem como fundo transparente na cota (0, 0), sem repetição, ou seja, se carregará uma única copia da imagem
  • A propriedade position se fixa como absolute
  • Se dão umas dimensões de largura e altura que coincidam exatamente com a largura e altura de um fotograma do sprite
  • Com isso, o que criamos é realmente uma espécie de janela de visão de fotogramas e com o método de JavaScript –de maneira transparente para nós- moveremos a imagem de forma que se vão sendo vistas as sucessivas imagens dos fotogramas, dando a sensação de movimento do sprite
Com respeito ao método sprite():
  • Criamos a função que associa o método ao elemento div que conterá o sprite
  • Se dá uma velocidade de passe de fotogramas por segundo, no nosso caso 24: fps: 24
  • Se fixa o número de fotogramas que contém o sprite: no_of_frames: 8
  • Agora a função tomará as características do sprite associado à janela –dados de dimensões-, dividirá convenientemente a imagem e mostrará no elemento div cada um dos fotogramas sucessivamente à velocidade especificada

 

Animação aleatória

Além de criar a animação pela apresentação sucessiva dos fotogramas contidos nosprite, també é fazer possível que ao mesmo tempo o conjunto se desloque por uma área da janela do navegador –à que chamaremos cenário- e que o faça de forma aleatória, para isso bastará chamar o método spRandom().

O método spRandom() toma como parâmetros:

  • top: cota superior do cenário
  • bottom: cota inferior do cenário
  • left: borda esquerda do cenário
  • right: borda direita do cenário
  • speed: velocidade –em ms- de cada ciclo de movimentação pelo cenário. Opcional
  • pause: tempo de pausa depois de cada ciclo de movimentação –em ms-. Opcional
O sprite será criado na área do elemento div associado, como no exemplo anterior, mas imediatamente começará a navegar de forma aleatória pelo cenário marcado pelas cotas dadas no método spRandom(). Na Listagem 2 se mostra uma modificação da Listagem 1, na que o sprite se moverá aleatoriamente por um cenário, em vez de permanecer estático em sua posição inicial.

Listagem 2: Modo de uso do método de animação aleatória spRandom()

<script>

$(function () {
$('#carteiro')
.sprite({ fps: 24, no_of_frames: 8 })
.spRandom({ top: 50, bottom: 400, left: 50, right: 520, speed: 4000, pause: 3000 })
});

</script>

O sprite, inicialmente na posição mostrada na figura anterior, se desloca aleatoriamente por um cenário prefixado
 

Controles de animação

Dispomos de três métodos pré - definidos:
  • spStop(): detém a animação
  • spStart(): recomeça a animação
  • spToggle(): inverte o estado de animação
Na Listagem 3 programamos três botões de comando para controlar a animação do sprite, com a chamada a estes três métodos.

Listagem 3: Uso de botões de comando para o controle da animação

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Animated Sprite Sheet (Spritely-jQuery)</title>

<script src="scripts/jquery-1.8.3.min.js"></script>
<script src="scripts/jquery.spritely-0.6.1.js"></script>

<style>
#carteiro {
background: transparent url(carteiro.png) 0 0 no-repeat;
position: absolute;
top: 100px;
left: 200px;
width: 70px;
height: 112px;
}
</style>

<script>

$(function () {
$('#carteiro')
.sprite({ fps: 24, no_of_frames: 8 })
});

</script>
</head>
<body>
<div id="cenario">
<div id="carteiro"></div>
<div>
<button onclick="$('#carteiro').spStop();">.spStop()</button>
<button onclick="$('#carteiro').spStart();">.spStart()</button>
<button onclick="$('#carteiro').spToggle();">.spToggle()</button>
</div>
</div>
<p>Spritely</p>
</body>
</html>

 

Controle de posição com clique do mouse

A biblioteca dispõe de um método muito avançado para fazer responder o sprite aos cliques do mouse sobre o corpo do documento, de maneira que se moverá de sua posição atual, até o lugar em que ocorreu. Se trata de um método associado ao corpo do documento e que não toma nenhum tipo de parâmetro –flyToTap()-.

O método flyToTap() é chamado com a sintaxe:

$('body').flyToTap();

Na Listagem 4 se mostra um exemplo de uso, que comentaremos posteriormente.

Listagem 4: Exemplo de controle de posição com cliques do mouse sobre o corpo do documento

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Animated Sprite Sheet (Spritely-jQuery)</title>

<script src="scripts/jquery-1.8.3.min.js"></script>
<script src="scripts/jquery.spritely-0.6.1.js"></script>

<style>
#carteiro {
background: transparent url(carteiro.png) 0 0 no-repeat;
position: absolute;
top: 100px;
left: 200px;
width: 70px;
height: 112px;
}

#cenario {
top: 0px;
left: 0px;
width: 800px;
height: 800px;
}
</style>

<script>

$(function () {
$('#carteiro')
.sprite({ fps: 24, no_of_frames: 8 }).activeOnClick().active();
});
$(function () {
$('body').flyToTap();
});

</script>
</head>
<body>
<div id="cenario">
<div id="carteiro"></div>
<div>
<button onclick="$('#carteiro').spStop();">.spStop()</button>
<button onclick="$('#carteiro').spStart();">.spStart()</button>
<button onclick="$('#carteiro').spToggle();">.spToggle()</button>
</div>
</div>
<p>Spritely</p>
</body>
</html>

Posição inicial do sprite

Posição do sprite ao clicar sobre um ponto do corpo do documento

O código seguido no exemplo foi:

  • Definir dois elementos div:
    • Um para conter o sprite original, como nos exemplos anteriores
    • O segundo, a falta de mais elementos na página, para que estenda a área de possibilidade de atuação dos cliques do mouse
  • A definição da função sprite(), que já vimos nos exemplos restantes, com as chamadas aos métodos adicionais:
    • active(): que indica que será o sprite ativado
    • activateOnClick(): que o ativa de fato ao clicar sobre o cenário
  • A incluso da nova função flyToTap(), que se ativará ao clicar sobre qualquer área do documento HTML
  • Os elementos restantes mantidos são os botões de comando de controle de animação, já comentados na seção anterior
Um aspecto interessante do método flyToTap() é que se houver um método spRandom() implementado –veja a seção Animação aleatória-, o sprite permanecerá uns segundos no lugar em que se clicou e posteriormente voltará ao lugar de animação aleatória de forma automática.
 

Conclusões

Comprovamos como o uso de umas boas bibliotecas de JavaScript podem simplificar enormemente as tarefas de qualquer programador; veja a animação de sprites, levando-nos a níveis de sofisticação relativamente elevados sem esforço algum.

O tema controvertido foi observado no começo. Caso se trate simplesmente de realizar uma animação, o emprego de CSS3 será, sem dúvida alguma, vantajoso. Porém, se o que se deseja é uma ampla compatibilidade e funções avançadas, bibliotecas como jQuery.sprytely serão certamente uma solução a levar em conta .


  Esperamos que tudo o que foi exposto tenha servido de ajuda. Até nosso próximo artigo, boas horas de programação.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato