Logo

Prácticas Web

Ejercicios y problemas

elementos dinamicos

elementos y efectos demandados por los diseñadores



logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Elementos dinámicos

Reloj analógico con SVG (II)

En la página anterior

121234567891011

Esta página es continuación de la anterior, en la que hemos empezado a construir un reloj analógico, De momento hemos puesto los elementos estáticos, y el estado en el resultado que tenemos hasta el momento es el que vemos aquí a la derecha. El código de lo que hemos hecho hasta ahora no lo vamos a repetir, ya que está en la página anterior, donde puedes ver el principio de este ejercicio, y el código que hemos hecho hasta llegar aquí.

Las saetas

Siguiendo con el ejercicio iniciado en la página anterior, el siguiente paso es poner las saetas del reloj, para ello dibujamos unas líneas que pasan por el centro del círculo, y que serán las saetas.

A cada una de estas líneass le pondremos una rotación, por lo que las pondremos dentro de un elemento g. Después tenemos que ajustar la rotación a la hora actual, y después darles el movimiento para poner el reloj en marcha.

Empecemos por el primer paso, dibjuar las saetas. Dentro del código que tenemos, después del elemento en PHP añadimos el siguiente código:

<svg width="300" height="300">
<defs>
   ....
</defs>
<g transform="translate(150,150),rotate(180)">
<circle x=0 y=0 r=150 stroke="black" stroke-width=2 fill="maroon"/>
<circle x=0 y=0 r=140 stroke="black" stroke-width=2 fill="url(#gr1)"/>
<?php 
   ....
?>
<g id="horas" transform='rotate(30)'>
  <line x1=0 y1=-25 x2=0 y2=90 stroke="navy" stroke-width=8>
  </line>
</g>
<g id="minutos" transform='rotate(60)'>
  <line x1=0 y1=-25 x2=0 y2=100 stroke="navy" stroke-width=4 >
  <line>
</g>
<g id="segundos" transform='rotate(90)'>
  <line x1=0 y1=-25 x2=0 y2=110 stroke="navy" stroke-width=2>
  </line>
</g>
</g>
</svg>
121234567891011

Hemos puesto en azul el código nuevo que hemos añadido. Aquí en los elementos defs y ?php, por no repetirlos enteros, hemos puesto puntos suspensivos, pero se supone que se quedan igual que estaban.

Hemos añadido por cada saeta un elemento g que contiene una línea que dibuja la saeta.

Cada uno de estos elementos está rotado, El ángulo de rotación que ponemos en principio puede ser cualquiera. El atributo id que hemos puesto a cada uno de ellos nos permitira cambiarlo con javascript. Las etiquetas line tienen una etiqueta de cierre, ya que así podremos ponerles luego una etiqueta de animamación.

ajustar la hora

Para ajustar la hora utilizaremos javascript. Mediante javascript buscaremos la hora actual, y modificamos luego la rotación de las saetas, para que coincida con la hora a la que se ha cargado la página.

el siguiente código javascript lo pondremos después del código del svg, ya que éste tiene que haberse cargado antes. Si la escribimos antes, debemos ponerlo dentro de la estructura window.onload=function() { ... }.

<script type="text/javascript">
fecha=new Date(); //obtener la fecha
hora=fecha.getHours(); //obtener la hora
minuto=fecha.getMinutes(); //obtener el minuto
segundo=fecha.getSeconds(); //obtener el segundo	
gr_h=(hora+minuto/60)*30; //rotación saeta hora
gr_m=minuto*6; //rotación saeta minuto
gr_s=segundo*6;  //rotación saeta segundo
Cambiar valor de las rotaciones al obtenido
document.getElementById("horas").setAttribute("transform","rotate("+gr_h+")")
document.getElementById("minutos").setAttribute("transform","rotate("+gr_m+")");
document.getElementById("segundos").setAttribute("transform","rotate("+gr_s+")");
</script>
121234567891011

Después de poner el script en la página, el resultado es el que vemos aquí a la derecha. La posición de las saetas ha cambiado, y marca la hora en la que se ha cargado la página.

El código javascript está comentado, y no creo que tenga mayor dificultad, ya que utilizamos el objeto new Date para obtener la hora, y después buscamos el ángulo que tienen que rotar las saetas, para luego cambiarlo.

Poner el reloj en marcha

El siguiente paso será hacer que las saetas se muevan. Tal como se ha indicado antes, esto lo haremos mediante la etiqueta de animación animate de SVG. Haremos rotar a cada saeta a la velocidad que van las saetas del reloj. Modificamos por tanto las etiquetas que dibujan las saetas para ponerles a cada una ellas una etiqueta animate que le haga rotar a la misma velocidad quevan las saetas del reloj.

Modificamos el código en el que hemos dibujado las saetas, e incluimos ls etiquetas de animación. Esta parte del código quedará así:

<g id="horas" transform='rotate(0)'>
  <line x1=0 y1=-25 x2=0 y2=90 stroke="navy" stroke-width=8>
  <animateTransform attributeType="XML" attributeName="transform"
    type="rotate" from="0"  to="360" dur="43200s"
    begin="0s" fill="freeze" repeatCount="indefinite"/> 
  </line>
</g>
<g id="minutos" transform='rotate(0)'>
  <line x1=0 y1=-25 x2=0 y2=100 stroke="navy" stroke-width=4 >
  <animateTransform attributeType="XML" attributeName="transform"
    type="rotate" from="0"  to="360" dur="3600s"
    begin="0s" fill="freeze" repeatCount="indefinite"/> 
  <line>
</g>
<g id="segundos" transform='rotate(0)'>
  <line x1=0 y1=-25 x2=0 y2=110 stroke="navy" stroke-width=2>
  <animateTransform attributeType="XML" attributeName="transform"
    type="rotate" from="0"  to="360" dur="60s"
    begin="0s" fill="freeze" repeatCount="indefinite"/> 
  </line>
</g>
121234567891011

En color azul destacamos el nuevo código que hemos puesto. El resultado será ahora el reloj ya en funcionamiento tal como lo vemos aquí a la derecha.

El código consiste en añadir una etiqueta de animación a cada línea de las saetas.

Estass etiquetas son casi idénticas en las tres líneas. Con ellas hacemos una rotación de 360 grados. L clave está en la duración (atributo dur, el el cual ponemos los segundos que tardará cada saeta en dar la vuelta completa.

Retoque final

Aunque el relojya está completo podemos mejorar su apariencia si ponemos un pequeño círculo central, tapando el centro de la esfera donde se juntan las saetas.

Para ello ponemos primero un segundo gradiente de color, dentro de la etiqueta defs

<defs>
  <radialGradient id="gr1" cx="50%" cy="50%" r="50%">
    <stop offset=0 stop-color="#e1f6ff"/>
    <stop offset=1 stop-color="#a0d0f9"/>
  </radialGradient>
  <radialGradient id="gr2" cx="50%" cy="50%" r="70%">
    <stop offset=0 stop-color="#ff9c00"/>
    <stop offset=1 stop-color="#a05905"/>
  </radialGradient> 
</defs>

Para después añadir el círculo al final de la etiqueta svg, justo antes de la última etiqueta g que engloba todo el reloj:

<svg widht="300" height="300">
 .....
 .....
  </line>
</g>
<circle cx=0 cy=0 r=15 fill="url(#gr2)" stroke="#a05905" stroke-width="1"/>
</g>
</svg>
121234567891011

El reloj ya lo tenemos acabado y quedará tal como lo vemos aquí a la derecha.

En la página del siguiente enlace podemos ver el código completo que hemos hecho, y el reloj en funcionamiento.

121234567891011

Si queremos aumentar o reducir su tamaño en la etiqueta svg cambiamos los atributos. en width y height ponemos el nuevo tamaño, y añadimos el atributo viewBox="0 0 300 300" en donde se pone un cuadrado con el tamaño original. Por ejemplo hemos reducido el reloj a la mitad de su tamaño poniendo al principio:

<svg width="150" height="150" viewBox="0 0 300 300">

Cambiando también los gradientes de color y los distintos colores, podemos hacer varios modelos, o elegir los que más nos gusten.





Aquí va el final de página y explicamos dónde continuar



Prácticas Web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com