Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

SVG en HTML5

SVG: dibujos y gráficos mediante vectores escalables.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

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





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 445

Visitas el mes pasado: 524

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


tutorial SVG
W3Scools
Using SVG with HTML5 tutorial
Alejandro Castillo Cantón
Agregar SVG a una página web
msdn.microsoft.com
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
W3C Recommendation 16 August 2011
Introducción a SVG
http://sabia.tic.udc.es

Donativos

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




SVG (X)

Animación I

imagen html5

Definición

Una animación es un cambio gradual de una propiedad o atributo de un elemento. Por gradual se entiende que es un cambio progresivo en el tiempo y que puede apreciarse a simple vista.

Las animaciones más habituales consisten en un cambio de posición, tamaño o color, aunque puede ponerse cualquier otra propiedad que sea controlada de forma numérica.

Tenemos varios métodos para hacer animaciones. Podemos en principio aplicar un código javascript para hacer una animación sobre un elemento en SVG de la misma manera que para cualquier otro elemento de HTML. También podemos usar el método de animación con CSS3, para animar las propiedades CSS que pueden aplicarse al elemento SVG.

Sin embargo SVG tiene también su propio método de animación, que consiste en una serie de etiquetas que se incluyen dentro del lenguaje SVG. Este es el que vamos a ver aquí.


La etiqueta "animate"

Esta etiqueta incluida dentro de cualquier elemento SVG, hace que podamos cambiar de forma progresiva alguno de sus atributos.

Para controlar la animación la etiqueta animate tiene varios atributos. por ejemplo queremos mover un cuadrado haciendo que se desplace a lo largo del eje "x". En principio pondremos:

<rect x="10" y="10" width="80" height="80" fill="#0000ff">
<animate attributeType="XML" attributeName="x" />
<rect>

Dentro de la etiqueta que define el cuadrado (<rect ...> </rect>) hemos puesto la etiqueta animate, la cual tiene los siguientes atributos:

Debemos poner unos cuantos atributos más en animate para indicar el recorrido y el tiempo de la animación.

Visto esto, modificamos el código anterior para incluir estos atributos:

<rect x="10" y="10" width="80" height="80" fill="#0000ff">
<animate attributeType="XML" attributeName="x"
from="10" to="180" dur="3s" begin="0s" />
</rect>

Aunque la animación ya funciona con este código hemos añadido dos atributos más a animate para que ésta sea más completa. Estos son:

Anadimos estos dos atributos al código que tenemos de antes, la animación que conseguimos es la que se ve en el recuadro de la derecha, y su código es el siguiente:

<svg width="270" height="110">
<rect x="10" y="10" width="80" height="80" fill="#0000ff">
   <animate attributeType="XML" attributeName="x"  
      from="10" to="180" dur="3s" begin="0s"
      fill="restore" repeatCount="indefinite" />		
</rect>
</svg>

El elemento animate puede llevar también otros atributos. Estos son:

Veremos más detenidamente algunos de estos atributos más adelante.


La etiqueta "set"

Esta etiqueta no produce una animación sino un cambio de estado instantáneo de un elemento

Como atributos se usan los mismos que para animate, sin embargo algunos de ellos no tiene sentido ponerlos al no haber un cambio gradual.

El ejemplo que vemos aquí de la derecha cambia el color de la elipse a los 7 segundos de cargar la página, para volver a su color original 10 segundos después.

El código que hemos usado para este ejemplo es el siguiente:

<svg width="250" height="150">
<ellipse cx="125" cy="75" rx="120" ry="70" fill="#0000ff">
   <set attributeType="XML" attributeName="fill"  
      to="#ff0000" dur="10s" begin="7s"
      fill="restore" />		
</ellipse>
</svg>

No es dificil saber qué función cumple cada atributo. Con to indicamos el color al que cambia el elemento. Con begin indicamos el tiempo de espera para que empiece la animación. dur marca el tiempo que dura la animación, y fill="restore" indica que al acabar la animación el elemento debe volver a su color original.


La etiqueta "animateMotion"

Esta etiqueta permite hacer que un elemento se mueva siguiendo una ruta determinada. Tenemos dos formas de hacerlo. La primera es hacer que el elemento siga una ruta ya existente, la segunda es crear una ruta específica para el elemento junto con la etiqueta.


Seguir una ruta ya existente

En primer lugar creamos una ruta mediante la etiqueta path, la única particularidad es que tenemos que ponerle el atributo id para identificarlo.

Después creamos el elemento que queremos que se mueva. En este caso una elipse. Las coordenadas de la figura estarán en referencia con el principio de la ruta (0,0 = principio de ruta)

Dentro de la etiqueta de la elipse pondremos la etiqueta animateMotion. Esta etiqueta tendrá como mínimo el atributo dur que indica la duración de la animación. Aquí hemos puesto también los atributos repeatCount="indefinite" y rotate="auto", éste último indica que la figura debe rotar para estar perpendicular a la ruta.

Dentro de la etiqueta animateMotion pondremos otra etiqueta que hará referencia a la ruta que se debe seguir. Esta etiqueta es:

<mpath xlink:href="#id_ruta"/>

El ejemplo que mostramos aquí sigue lo explicado anteriormente, y tiene el siguiente código:

<svg width="270" height="270">
<path id="ruta1" d="M50,180 c0,-200 100,-150 80,-50 s30,150 100,-70 m180,120 z" 
    fill="none" stroke="blue" stroke-width="3"/>
<ellipse cx="0" cy="-18" rx="25" ry="15" fill="orange" stroke="maroon" stroke-width="3">
  <animateMotion dur="6s" rotate="auto" repeatCount="indefinite">
     <mpath xlink:href="#ruta1" />
  </animateMotion>
</ellipse>
</svg>

La etiqueta animateMotion usa los mismos atributos que animate para controlar la animación. Sin embargo aquí no se usan los atributos attributeName y attributeType ya que no se modifica ningún atributo.

La referencia a la ruta se hace mediante la etiqueta <path xlink:href="id_ruta"> la cual se coloca anidada dentro de la etiqueta animateMotion.

El atributo rotate hace que el elemento se alinee de forma perpendicular a la ruta, girando para estar siempre mostrando la misma cara delante de la ruta. Sus valores son "auto": se mantiene por encima de la ruta, siguiéndola; "auto-reverse": como el anterior pero se mantiene por debajo de la ruta; o podemos poner un número que indica los grados que el elemento gira respecto de su posición inicial. En este último caso el elemento mantiene siempre el mismo ángulo y no gira con la ruta.


Seguir una nueva ruta

La nueva ruta se define con el atributo path dentro de la etiqueta animateMotion este atributo tiene como valor los elementos que conforman la ruta, de la misma manera que lo haría el atributo d dentro de una etiqueta path.

El resto de atributos de animateMotion son iguales que para el caso anterior. La diferencia es que aquí no tenemos que hacer referencia a ninguna ruta externa ni poner la etiqueta mpath.

Al igual que en el caso anterior las coordenadas del elemento animado hay que ponerlas en referencia a la ruta.

La ruta no es visible más que por la trayectoria que sigue el elemento animado, ya que no está definida como tal.

El ejemplo que hemos puesto aquí a la derecha tiene el siguiente código:

<svg width="270" height="270" >
<rect x="-40" y="-40" width="80" height="80" fill="lime"
     stroke="green" stroke-width="2">
	<animateMotion path="M50,50 l170,0 l0,85 a85,85,0,0,1,-170,0 l0,-85 z" 
	     dur="6s" rotate="auto" repeatCount="indefinite" />
</rect>
</svg>

La etiqueta "animateTransform"

La etiqueta animateTransform permite hacer animaciones en las cuales el cambio que se produce en el elemento es debido a una transformacion de las ya vistas con el atributo transform.

El uso de esta etiqueta es similar a las anteriores, sin embargo debemos poner siempre los atributos attributeType="XML" y attributeName="transform".

además debemos poner siempre el atributo type donde indicamos el tipo de transformación:

<animateTransform attributeType="XML" attributeMode="transform" type="scale"/>

Los demás atributos son los normales de una animación, en los atributos from y to incluiremos los valores inicial y final de la transformación, es decir los valores que se ponen entre paréntesis, por ejemplo para un type="scale" puede ser from="0.5 0.5" to="1.5 1.5", o para un type="rotate" podría ser from="0deg" to="90deg".

La animación de la derecha está hecha con una transformación de escalado, el código de este ejemplo es el siguiente.

<svg width="270" height="120">
<g transform="translate(10 20)">
<rect x="0" y="0" width="80" height="80" 
   fill="aqua" sroke="blue" stroke-width="3">
   <animateTransform attributeType="XML" attributeName="transform"
     type="scale" from="1 0.5"  to="2.7 1" dur="4s"
     begin="0s" fill="freeze" repeatCount="indefinite"/> 
</rect>
</g>
</svg>





En la siguiente página seguimos viendo las posibilidades que tenemos en SVG con la animación gráficos SVG con una cierta calidad, las transformaciones

Animación II



Manual de HTML5

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