tag:blogger.com,1999:blog-60086797780746110192011-09-26T12:38:05.818+02:00TulinmolaTulin!http://www.blogger.com/profile/15410696923586661218noreply@blogger.comBlogger21100tag:blogger.com,1999:blog-6008679778074611019.post-50744442010729975382008-01-28T10:17:00.000+01:002008-01-28T10:35:01.196+01:00Animaciones javascript + CSS<p>
Existen varios métodos para obtener animaciones en una web. El más sencillo de todos es usar imágenes gif animadas. De esta forma no hay que escribir código adicional para el cambio de sprite y puede usarse con buenos resultados poniendo unos gifs encima de otros (se colgará en breve un juego 100% javascript usando este sistema).
</p>
<p>
Mediante javascript se puede cambiar la localización de una imagen cada cierto tiempo (el atriburo <code>src</code> del tag <code>img</code>). Se debe tener una imagen para cada fotograma de la animación, lo que provoca un elevado número de elementos a la hora de cargar la página, además de una carga para el navegador al invocar al cambio de un sprite a otro.
</p>
<p>
El método que se va a presentar se basa en tener todos sprites de la animación en una sola imagen. Esta imagen servirá de fondo para un <code>div</code> del tamaño del sprite, y simplemente estableciendo el inicio de la misma en el estilo del <code>div</code> se podrá cambiar de un sprite a otro.
</p>
<p>
Veamos un ejemplo. Teniendo esta imagen:
</p>
<img src='http://lh6.google.es/tulinmola/Rssj_c7ty8I/AAAAAAAAAE0/b8oBZEMDtwE/bisho.png' alt='Bisho, imagen completa'/>
<p>
Y la siguiente entrada en la hoja de estilos:
</p>
<div class='Code'><style type="text/css">
.Bisho {
width: 45px;
height: 34px;
background-image:url(url_de_tu_imagen);
background-position: 0px 0px;
}
</style>
</div>
<p>
Con <code>width</code> y <code>height</code> se establece el tamaño de los sprites. La ruta de la imagen está especificada en el atributo <code>background-image</code>. Y el último parámetro es la posición desde la que empieza esa imagen seleccionada. Modificando esta posición podemos ver los distintos sprites de la imagen.</p>
<p>
Se muestran un par de ejemplos simples:
</p>
<table border='0' style='margin:auto'>
<tr style='text-align:center'>
<td>
<div class='Bisho' style='background-position: 0px 0px;'></div>
</td>
<td>
<div class='Bisho' style='background-position: 0px 34px;'></div>
</td>
</tr>
<tr style='font-size:11px'>
<td>
<code><div class='Bisho' style='background-position: 0px 0px;'></div></code>
</td>
<td>
<code><div class='Bisho' style='background-position: 0px 34px;'></div></code>
</td>
</tr>
</table>
<p>
Para obtener una animación simplemente hay que modificar el parámetro <code>background-position</code> cada cierto tiempo. Con el siguiente fragmento de código conseguimos este efecto:
</p>
<div class='Code'><script type='text/javascript'>
var bisho = document.getElementById('bisho');
var bishoStep = 0;
var bishoPosition = 0;
var bishoTimer = null;
function nextStep(){
var x = 45*bishoStep;
var y = 34*bishoPosition;
bisho.style.backgroundPosition = "-" + x + "px -" + y + "px";
bishoStep = (bishoStep+1)%8;
bishoTimer = setTimeout(nextStep, 100)
}
nextStep();
</script>
</div>
<p>
La variable <code>bisho</code> hace referencia al elemento del DOM que contendrá nuestro sprite. El paso actual se guardará en <code>bishoStep</code> y es la variable que sirve para calcular la primera coordenada de la posición del fondo. Se asegura que este valor no esté fuera de rango con la operación módulo. La segunda coordenada se obtiene con la variable <code>bishoPosition</code> (que en el ejemplo a continuación se modifica mediante el combo-box). Y finalmente se hace que esta función sea llamada dentro de un cierto tiempo mediante el <code>setTimeout</code>.
</p>
<style type="text/css">
.Bisho {
width: 45px;
height: 34px;
background-image: url(http://lh6.google.es/tulinmola/Rssj_c7ty8I/AAAAAAAAAE0/b8oBZEMDtwE/bisho.png);
/* background-image: url(http://bp0.blogger.com/_48fKn8eFxt4/RslLsy6aH6I/AAAAAAAAAAM/fq9RygMrUzY/s1600-h/bisho.png);*/
background-position: 0px 0px;
}
</style>
<div id='bisho' class='Bisho'>
</div>
<select onchange='bishoIndex=this.value'>
<option value='0'>Derecha</option>
<option value='1'>Izquierda</option>
<option value='2'>Abajo</option>
<option value='3'>Arriba</option>
</select>
<script type='text/javascript'>//<![CDATA[
var bisho = document.getElementById('bisho');
var bishoStep = 0;
var bishoIndex = 0;
var bishoTimer = null;
function nextStep(){
var x = 45*bishoStep;
var y = 34*bishoIndex;
bisho.style.backgroundPosition = "-" + x + "px -" + y + "px";
bishoStep = (bishoStep+1)%8;
bishoTimer = setTimeout(nextStep, 100)
}
nextStep();
//]]></script><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6008679778074611019-5074444201072997538?l=tulinmola.blogspot.com' alt='' /></div>Tulin!http://www.blogger.com/profile/15410696923586661218noreply@blogger.com2tag:blogger.com,1999:blog-6008679778074611019.post-43811234305300186422007-08-16T08:52:00.000+02:002007-08-16T22:56:59.587+02:00Hola mundoBueno, he aquí mi primer post...
<br/>
<code>
Hola mundo!
</code><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6008679778074611019-4381123430530018642?l=tulinmola.blogspot.com' alt='' /></div>Tulin!http://www.blogger.com/profile/15410696923586661218noreply@blogger.com1