No has iniciado sesión
Conectar al sistema | Registrar usuario
Foros Mensajes No contestados Conversaciones Mensaje
 

Animación en Javascript

Vuelvo a acudir a este foro que tantas veces me ha ayudado.

Estoy experimentando un poco con javascript. Lo que me gustaría hacer ahora es una animación en plan "sencillo" con javascript.

Con eso de sencillo me refiero que tan sólo quiero dibujar una capa en medio de la pantalla y que al cargar la página se mueva un poco hacia la derechas.

He creado un ejemplo muy sencillo con la función setTimeout pero no va bien:

<html>
<head>
<style>
#capa{
position:absolute;
left:10px;
top:10px;
width:50px;
height:50px;
border:solid;
}
</style>
<script Language="javascript">
function posicio(int(lloc))
{
document.getElementById("capa").style.left=lloc+"px";
lloc=lloc+1;
if(lloc!=800)
setTimeout("posicio(lloc)",10);
}
</script>
</head>
<body onLoad=posicio(50)>
<div id="capa">Capa1</div>
</body>
</html>


Al ejecutar el programa me dice que lloc no está definido.

De todas formas, aunque esto funcionara correctamente, creo que la animación no se vería, puesto que sólo mostraría el estado inicial y el final pero no el trayecto.

En fin, alguien me podría guíar sobre como hacer una animación en javascript?

Sólo quiero hacer ese movimiento (u otro que sea igual de sencillo) después ya le echaré yo imaginación para hacer algo interesante.

Muchas gracias por adelantado.
0 votos
Preguntado hace 8 años y 115 dias por victorvgm  63 mensajes  
 

Re: Animación en Javascri

Te he hecho un par de retoques:
 
000 
001 
002 
003 
004 
005 
006 
007 
008 
009 
010 
011 
012 
013 
014 
015 
016 
017 
018 
019 
020 
021 
022 
023 
024 
025 
026 
027 
028 
029 
<html>
<head>
<style>
#capa{
position:absolute;
left:10px;
top:10px;
width:50px;
height:50px;
border:solid;
}
</style>
<script Language="javascript">
// El tema int(lloc) no agrada a Firefox
// suposo que en IE funciona pero millor fora
function posicio(lloc)
{
document.getElementById("capa").style.left=lloc+"px";
  lloc=lloc+1;
  // La variable posicio no existeix
  // dins el codi evaluat, canvio "posicio(lloc)"
  // per "posicio("+lloc+")"
  if(lloc!=800) setTimeout("posicio("+lloc+")",10);
}
</script>
</head>
<body onLoad=posicio(50)>
<div id="capa">Capa1</div>
</body>
</html>
 
Te puesto comentarios sobre los cambios que he hecho.

Saludos
¿Te ha sido útil la respuesta? Considera contribuir contestando preguntas sin responder de otros usuarios o compartir tus conocimientos escribiendo un artículo
0 votos
Preguntado hace 8 años y 115 dias por eloi  2465 mensajes  
 

Re: Animación en Javascript

el código va fantástico. Muchísimas gracias.
0 votos
Preguntado hace 8 años y 115 dias por victorvgm  63 mensajes  
 
Páginas:  1 
 
Responder
No puedes responder, mensaje cerrado por inactividad