Home Tutoriais Desenvolvimento Animações de sprites mediante CSS3 e JavaScript


Vamos aproveitá-las no momento para um âmbito nem sempre suficientemente explícito em nossas codificações, a otimização do código, e mais concretamente, mediante sprites animados.

Veremos como em essência não precisaremos nada de JavaScript para isso; embora o usaremos como algo necessário para labores de controle das animações; portanto minimizando ao máximo sua utilização.

Ainda caberia um passo mais na otimização do código, algo que tratamos anteriormente: a inclusão do sprite em forma de imagem embebida, mas isso é algo que deixamos para posterior experimentação.

No presente artigo falaremos de:

  • O tratamento de sprites mediante CSS3
  • A animação de sprites mediante CSS3 puro
  • O suporte dado para isso pelos diferentes navegadores de Internet
  • O modo de controlar as animações com código JavaScript complementar

 

Animação de um sprite mediante CSS3

A especificação das animações CSS3 no modo rascunho em seu estado atual, em sua última forma, se pode consultar no seguinte endereço de Internet do World Wide Web Consortium (W3C): w3.org/TR/css3-animations

Essencialmente deveremos tratar com uma regra e uma propriedade, que descrevemos a seguir:

A regra @keyframes é o núcleo da definição da animação em CSS3. Dentro dela se especificará o estilo que se aplicará à evolução da animação. Esta regra se associa a uma propriedade correspondente, do contrario não terá efeito algum. Essa propriedade é a denominada “animation”. (w3schools.com/css3/css3_animations.asp)

  • Para nosso caso, se utilizarão as cotas from … to, que marcarão os estados inicial e final da animação. Isso representa o valor inicial (0%) e o final (100%), interpolando-se automaticamente os valores intermediários marcados no valor da função de iteração descrita na propriedade de animação associada –veja a seguir-
  • Também seria possível utilizar valores percentuais de evolução, marcando estágios de evolução a 10, 20, … 90%, por exemplo
  • Embora não seja obrigatório, é recomendável, neste caso, também marcar os estados de 0 e 100%

A propriedade animation, por sua parte, define as propriedades que terá a animação em si. Nela se passam uma serie de parâmetros –valores. (w3schools.com/cssref/css3_pr_animation.asp).

Sua sintaxe é, na forma mais completa:
animation: name duration timing-function delay iteration-count direction;

 

Valor
name Nome do keyframe que contém –define- a animação
duration Especifica o tempo que tardará a animação em ser reproduzida
timing-function Normalmente indicará as etapas da animação
delay Tempo de demora antes que comece a animação
iteration-count Recontagem do número de vezes que se repetirá
direction Indica, caso se repita, se se realizará em reversão ou em ciclos com reinicio

Os valores podem ser definidos separadamente, por exemplo:
animation-duration: 0.8

  • O valor animation-timing-function que utilizaremos é a função steps, que marca o número de etapas da animação, que por sua vez coincidirá com o número de fotogramas do sprite
  • O valor animation-iteration-count pode tomar qualquer valor inteiro ou infinite, que implica um looping infinito
  • O valor animation-direction pode valer normal –valor por padrão- ou alternate, neste último caso se levará a cabo em ciclos alternos no modo inverso.

Suporte nos diversos navegadores

A animação de sprites mediante CSS3, tal qual as expomos no presente artigo, mediante código CSS3 com @keyframes e animation:

  • É suportado, tal qual se define pelo W3C, no Internet Explorer 10, Opera e Firefox (Mozilla) em suas versões mais recentes
  • Os navegadores restantes precisam, pelo menos no momento presente, de suporte particular para sua execução. Sendo assim, todos dispõem de tais suportes –webkit, …-. Naturalmente, isso é algo que pode mudar em qualquer nova versão dos respectivos navegadores

Exemplo de animação de sprites mediante CSS3

No exemplo que segue ilustramos a animação do sprite mostrado na imagem do início do artigo; o código se mostra no Listado 1 e essencialmente consta de:

  • A propriedade animation toma como primeiro parâmetro o nome da propriedade que define a animação, veja mais adiante
  • Seu segundo parâmetro fixa o tempo em segundos em que se realizará o ciclo de uma animação completa, 0.8s
  • O terceiro parâmetro fixa a função que realizará o ciclo de animação, se trata de steps, que toma por sua vez de parâmetros o número de etapas, 8, e se indica que isso marca o final do ciclo
  • O quarto e, no nosso caso, último parâmetro, indica que o ciclo se repetirá indefinidamente, se da o valor infitite
  • Com respeito à regra @keyframes, se da em seu formato from … to
  • Isso supõe fixar seu ponto de inicio e seu ponto de finalização, que serão interpolados com base na função definida na propriedade animation
  • Dado que se trata de um sprite em linha, só se da o valor da cota de “background-position”. Note que a cota se passa com valor negativo, sendo os dados do inicio e do final do sprite
  • Damos o código com o suporte para os casos particulares dos diversos navegadores, embora em suas versões mais recentes não os precisassem, como comentamos no apartado anterior –Suporte nos diversos navegadores-

Note que se faz para todos os casos a modo de ilustração, dado que alguns, como as versões anteriores a Internet Explorer 10, para dar um exemplo, não dão suporte a este tipo de animação CSS3, enquanto que a 10 não precisa de nenhum código particular.

Listado 1: Exemplo de animação de sprites com CSS3

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>

<style>
@keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-ms-keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-o-keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-webkit-keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-moz-keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

.recorte {
width: 70px;
height: 112px;
background-image: url(“carteiro.png”);
-ms-animation: carteiro .8s steps(8, end) infinite;
-webkit-animation: carteiro .8s steps(8, end) infinite;
-moz-animation: carteiro .8s steps(8, end) infinite;
-o-animation: carteiro .8s steps(8, end) infinite;
animation: carteiro .8s steps(8, end) infinite;
}
</style>
</head>
<body>

<div></div>
</body>
</html>

Controle da animação mediante JavaScript

No Listado 2 incluímos código JavaScript complementar, não para a animação em si, mas para o controle da animação. Isto é, para a paralização e continuação da animação.

O acrescentado é muito simples, se trata de programar botões de comando que façam uso da função “stopAnimation” e “startAnimation”, que modifiquem o estado do estilo de animação “animationPlayState”: O código JavaScript se reúne na breve listagem imediatamente abaixo e só cabe ressaltar:

  • O valor de animationPlayState se permuta de paused para running, para, respectivamente, pausar e restabelecer a execução da animação
  • Sobre que se aplica o estilo se programa com uma simples chamada DOM ao elemento DIV que contém a animação
  • A codificação dos botões de comando pode ser observado no Listado 3, ao final, na forma de dois componentes button que chamam as funções JavaScript quando são pressionados

<script>

function startAnimation() {
document.getElementById(“recorte”).style.animationPlayState = “running”;
}

function stopAnimation() {
document.getElementById(“recorte”).style.animationPlayState = “paused”;
}

</script>

Entretanto, o Listado 2 nos mostra nosso exemplo final, pronto para ser utilizado com os diferentes navegadores, com as mesmas considerações que realizamos em relação ao exemplo inicial.

Listado 2: Exemplo de animação de sprites com CSS3 e controles de execução programados em JavaScript

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>

<style>
@keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-ms-keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-o-keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-webkit-keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-moz-keyframes carteiro {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

.recorte {
width: 70px;
height: 112px;
background-image: url(“carteiro.png”);
-ms-animation: carteiro .8s steps(8, end) infinite;
-webkit-animation: carteiro .8s steps(8, end) infinite;
-moz-animation: carteiro .8s steps(8, end) infinite;
-o-animation: carteiro .8s steps(8, end) infinite;
animation: carteiro .8s steps(8, end) infinite;
}
</style>

<script>

function startAnimation() {
document.getElementById(“recorte”).style.MsAnimationPlayState = “running”;
document.getElementById(“recorte”).style.webkitAnimationPlayState = “running”;
document.getElementById(“recorte”).style.MozAnimationPlayState = “running”;
document.getElementById(“recorte”).style.OAnimationPlayState = “running”;
document.getElementById(“recorte”).style.animationPlayState = “running”;
}

function stopAnimation() {
document.getElementById(“recorte”).style.MsAnimationPlayState = “paused”;
document.getElementById(“recorte”).style.webkitAnimationPlayState = “paused”;
document.getElementById(“recorte”).style.MozAnimationPlayState = “paused”;
document.getElementById(“recorte”).style.OAnimationPlayState = “paused”;
document.getElementById(“recorte”).style.animationPlayState = “paused”;
}

</script>

</head>
<body>
<div id=”recorte”></div>
<button id=”Pausar” name=”Pausar” onclick=”stopAnimation()”>Pausar</button>
<button id=”Animar” name=”Animar” onclick=”startAnimation()”>Animar</button>
</body>
</html>

Conclusões

Ao longo do presente artigo vimos como programar uma animação de sprites mediante CSS3 e como controlá-la mediante algum código JavaScript.

Comprovamos a simplicidade do código subjacente e uma forma mais de acrescentar animações a nossas páginas web e ademais de forma otimizada. Tal como descrevemos ao começo, só nos faltaria um ponto importante final, que deixamos como um exercício: inserir embebida a imagem no arquivo HTML, mediante “Base64”, por exemplo, tal como fizemos no artigo cuja referencia damos no início.

Fonte: http://www.criarweb.com/artigos/sprites-css3-javascript.html

   

Leave a Reply

This blog is kept spam free by WP-SpamFree.