Foros del Web » Programando para Internet » Javascript »

Hacer un movimiento circular

Estas en el tema de Hacer un movimiento circular en el foro de Javascript en Foros del Web. Hola amigos. Antes que nada quiero deciros que es un placer para mi participar en este foro. Quiero de paso dar la enhorabuena a sus ...
  #1 (permalink)  
Antiguo 05/04/2015, 04:35
 
Fecha de Ingreso: abril-2015
Mensajes: 24
Antigüedad: 9 años
Puntos: 1
Hacer un movimiento circular

Hola amigos.

Antes que nada quiero deciros que es un placer para mi participar en este foro. Quiero de paso dar la enhorabuena a sus gestores y moderadores, así como a todos aquellos que participan en él y ofrecen sus aportaciones de manera desinteresada; bien de forma activa, ofreciendo respuestas, o pasiva, generando nuevas preguntas.

Y dicho esto, observo con cierta perplejidad los complejos códigos que se utilizan para realizar ciertos comportamientos en las páginas. Obras maestras de la ingeniería informática, pero que en mi modesta opinión se complican en exceso.

Llevo programando en JavaScript desde el año 2001, y siendo verdad que no domino dicho lenguaje al 100%, algo entiendo. De hecho, quienes saben de programación mucho más que yo, saben también que de todo el lenguaje, es apenas el 50% el que suele utilizarse. El resto o bien está almacenado en códigos fuente, o simplemente no se utilizan.

Un ejemplo de lo que muchas veces nos complicamos para llegar a soluciones pequeñas es el movimiento circular de una capa <div>.

Antes de comenzar a trabajar por mi cuenta, supervisé algunos códigos que encontré por la web. Efectivamente la mayoría de ellos eran obras maestras de la arquitectura informática, muy difíciles de entender por alguien con una formación tan básica como la mía. Sin embargo, aunque funcionaban, derrochaban código en exceso. Es como matar moscas a cañonazos.

Para no excederme en el artículo expongo la siguiente dirección donde puede verse una manera compleja de conseguir un movimiento circular (en realidad es un movimiento en forma de 8 tumbado, como el signo de infinito).

http://www.htmlpoint.com/dynamic/grafica/grafica14.htm

Si quieres que un <div> realice un movimiento circular, nada tan fácil como el siguiente código:

<html>

<head>
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 2</title>
</head>

<script language=javascript>

//definimos la variable que incrementará el valor de un ángulo que parte de 0
valor=0;
function girar(){

//Incremento progresivo del ángulo con valor 0.04; el valor 0.04 establece la
//precisión del movimiento. A mayor valor, menor precisión. Si damos
//un valor muy alto, el movimiento irá a "saltos"
valor=valor+0.04;

//Generamos valores de seno y coseno de la variable valor
posicion=Math.sin(valor);
posicioncos=Math.cos(valor);

// Asignamos las fórmulas anteriores a dos variables que establecerán
// los movimientos horizontal y vertical
posicion1=(posicion*100)+200;
posicion2=(posicioncos*100)+200;

//Asignamos las variables anteriores a las posiciones left (horizontal) y top (vertical)
capa.style.left=posicion1+'px';
capa.style.top=posicion2+'px';


//Hacemos que la función se repita una y otra vez cada 10 milisegundos
setTimeout('girar()',10)


}


</script>
//Configuramos el body para que al cargarse la página se inicie la función girar()
<body onload="girar()"><form name=f1>

<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 351px; top: 134px" id="capa">
<table border="1" width="100%" id="table1" height="106">
<tr>
<td bgcolor="#800000">&nbsp;</td>
</tr>
</table>
</div>


</form>
</body>

</html>


Haz un copia y pega en un *.txt. Cambia la extensión a HTML, y al abrirla en tu navegador verás el <div> moverse en forma circular.
  #2 (permalink)  
Antiguo 05/04/2015, 04:54
(Desactivado)
 
Fecha de Ingreso: abril-2015
Ubicación: España
Mensajes: 616
Antigüedad: 9 años, 1 mes
Puntos: 74
Respuesta: Hacer un movimiento circular

he ejecutado el código y funciona bien. Gracias por la aportación
  #3 (permalink)  
Antiguo 05/04/2015, 10:11
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: Hacer un movimiento circular

Pon el código en un sito como jsfiddle, para que cualquiera pueda verlo pinchando un sólo enlace.

Y convirtiendo ese código en algo más usable, podría salir algo como ésto:
http://jsfiddle.net/marlanga/t4t4snuk/2/
  #4 (permalink)  
Antiguo 05/04/2015, 13:38
 
Fecha de Ingreso: abril-2015
Mensajes: 24
Antigüedad: 9 años
Puntos: 1
Respuesta: Hacer un movimiento circular

Acabo de visitar la dirección http://jsfiddle.net/marlanga/t4t4snuk/2/ y me hace sentir como un pigmeo en el país de los gigantes.

Me sorprende todo el código en su conjunto, pero en especial este tramo:

setTimeout(
function(){
self.girar();
},
this._default.timeout
);
}

Yo siempre he manejado el setTimeout con la siguiente sintaxis setTimeout("expresion", tiempo)

Había visto formas complejas de uso, pero nunca que se metiese una función como parte de la expresión.
  #5 (permalink)  
Antiguo 05/04/2015, 14:18
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Hacer un movimiento circular

Cita:
Iniciado por luisceb Ver Mensaje
Yo siempre he manejado el setTimeout con la siguiente sintaxis setTimeout("expresion", tiempo)

Había visto formas complejas de uso, pero nunca que se metiese una función como parte de la expresión.
Deberías de echarle un vistazo a la documentación existente, así no te sorprenderías con códigos como el que te han mostrado.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: circular, dinamico, movimiento
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:52.