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