Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

SVG (XI)

Animación II

Presentación

En la página anterior hemos visto cómo hacer animaciones simples con elementos aislados, aquí veremos animaciones más complejas en las que intervienen varios elementos, así como la posibilidad de interactuar con el usuario por medio de eventos.

Puntos de control

Hemos visto en la página anterior cómo para controlar la animación indicamos siempre el estado de la misma al principio y al final mediante los aributos from (principio) y to final. Tenemos por tanto dos puntos de control.

Podemos también poner uno o más puntos intermedios si sustituímos los atributos from y to por el atributo values

El valor del atributo values será la lista de los puntos de control separados entre sí por el signo de punto y coma:

<animate values="a;b;c"... >

El tiempo marcado para la animación se distribuye uniformemente para ir desde el punto marcado al principio de la lista hasta el punto final.

Este atributo puede aplicarse tanto a la etiqueta animate como a la etiqueta animateTransfrom.

Los demás atributos para la animación son los normales vistos ya en la página anterior.

En el ejemplo de la derecha hemos puesto una animación con varios puntos de control sobre una transformación de tipo "translate". Su código es el siguiente:

<svg width="270" height="270">
<rect x="10" y="10" width="70" height="70"
     fill="blue" stroke="red" stroke-width="2">
		 <animateTransform attributeType="XML" attributeName="transform"
	  type="translate" values="10 10;170 10; 170 170; 10 170; 10 10" dur="6s"	
    begin="0s"  repeatCount="indefinite"/>    
</rect>
</svg>

Encadenar animaciones

Consiste en que si tenemos varias animaciones, se vean una detrás de otra, de manera que cuando acabe una empiece la siguiente.

Los atributos begin (comienzo) y (end) (final) no sólo admiten como valor medidas de tiempo, sino que pueden marcar cuando empieza o acaba la animación respecto al comienzo o final de otras animaciones. También sirven, como veremos más adelante, para incluir eventos en las animaciones.

Para marcar el comienzo de una animación (a1) cuando termina otra (a2), en la segunda animación (a2) debemos poner el atributo id de identificación.

en la primera animación (a1) pondremos el atributo begin donde indicamos el inicio de la animación de la siguiente manera:

<animate begin="id_a2.end" ...>

aquí id_a2 es el valor del atributo id de la animación de referencia, y .end indica que la animación empezará cuando acabe la anterior. Si hubieramos puesto .begin indicaría que la animación empieza al mismo tiempo que la indicada.

podemos añadir también una medida de tiempo (con el signo mas + o menos - ) para indicar el comienzo con retardo o con anterioridad al final de la animación anterior:

<animate begin="id_a2.end+4s" ...>

En este caso la animación empezará a los cuatro segundos de acabar la anterior.

Por último podemos poner también varias condiciones o valores para el atributo begin. Para ello debemos separarlos por punto y coma. Por ejemplo podemos hacer que una animación se produzca al cargarse la página y también cuando acabe otra.

<animate begin="0s;id_a2.end+4s" ...>

Lo explicado aquí para el atributo begin es exactamente igual para el atributo end con la unica diferencia de que no indicamos el principio de la animación, sino el final, siempre que ésta esté en marcha.

El ejemplo mostrado a la derecha encadena cuatro animaciones una tras otra de manera que formen un bucle continuo. Su código es el siguiente:

<svg width="270" height="290">
<rect x=10 y=10 width=80 height=60
    fill="yellow" stroke="navy" stroke-width="3">
    <animate  id="r1" attributeType="XML" attributeName="x"
       values="10;170;10" dur="2s" begin="0s;r4.end+2s"/>
</rect>	
<rect  x=10 y=80 width=80 height=60
    fill="red" stroke="navy" stroke-width="3">
    <animate id="r2" attributeType="XML" attributeName="x"
       values="10;170;10" dur="2s" begin="r1.end"/>
</rect>
<rect  x=10 y=150 width=80 height=60
    fill="green" stroke="navy" stroke-width="3">
    <animate id="r3" attributeType="XML" attributeName="x"
       values="10;170;10" dur="2s" begin="r2.end"/>
</rect>
<rect  x=10 y=220 width=80 height=60
    fill="blue" stroke="navy" stroke-width="3">
    <animate id="r4" attributeType="XML" attributeName="x"
       values="10;170;10" dur="2s" begin="r3.end"/>
</rect>
</svg>

Observa cómo lo que hace que las animaciones vayan encadenadas es el atributo begin.

Eventos de ratón

Podemos hacer también que la animación empiece cuando el usuario haga alguna acción con el ratón, es lo que se entiende como eventos de ratón.

Puede haber los siguientes eventos de ratón:

• click : Se produce cuando se hace clic con el ratón sobre un elemento.
• mousedown : Se produce mientras se pulsa el botón (sin soltarlo) del ratón sobre un elemento.
• mouseup : Se produce al soltar el botón del ratón, que estaba pulsado, sobre un elemento.
• mouseover : Se produce al entrar el ratón dentro de un elemento (ponerse encima).

• mouseout : Se produce al salir el ratón de un elemento.

• mousemove : Se produce al moverse el ratón dentro de un elemento.

Para que el evento funcione el elemento sobre el que actúa el raton debe llevar un atributo identificador id.

<text id="rotar" ...>ROTAR</text>

Después en la animación lo indicaremos en el atributo begin.

begin="rotar.click"

Donde rotar es el "id" del elemento de control, y click es el evento que queremos aplicar.

Si aplicamos el evento de la misma manera sobre el atributo end conseguiremos que la animación se pare:

end="parar.click"

Al pulsar sobre el elemento que lleva el id="parar" la animación se detiene.

El ejemplo de la derecha tiene tres animaciones controladas por eventos, La rotación y el sesgado se activan pulsando en los textos superiores y se desactivan pulsando en el texto inferior. Además el cuadrado va cambiando de color mientras el ratón este encima. El código de este ejemplo es el siguiente:

<svg width="270" height="270">
<!--recuadros y textos de control -->
<rect x="5" y="5" width="260" height="30px"m fill="yellow" stroke="navy"/>
<rect x="5" y="235" width="260" height="30px"m fill="yellow" stroke="navy"/>
<text id="rotar" x="15" y="30" 
    style="fill: navy; font: bold 20px 'comic sans ms'; cursor: pointer">
    ROTAR</text>
<text id="inclinar" x="120" y="30" 
    style="fill: navy; font: bold 20px 'comic sans ms'; cursor: pointer">
    INCLINAR</text>
<text id="parar" x="90" y="260" 
    style="fill: navy; font: bold 20px 'comic sans ms'; cursor: pointer">
    PARAR</text>
<g transform="translate(135 135)">
        <!-- elemento al que se le aplican las animaciones -->
<rect id="rect1" x="-50" y="-50" width="100" height="100" 
    fill="#ff0000" stroke="black" stroke-width="2">
        <!-- animaciones: 1ª rotación, 2ª inclinacion, 3ª color -->
    <animateTransform attributeType="XML" attributeName="transform"
        type="rotate" values="0;360" dur="3s"	
        repeatCount="indefinite" begin="rotar.click" end="parar.click"/>
    <animateTransform attributeType="XML" attributeName="transform"
        type="skewX" values="-30;45;-30" dur="3s"
        repeatCount="indefinite" begin="inclinar.click" end="parar.click" />	
    <animate atributeType="XML" attributeName="fill" 
        values="#ff0000;#00ff00;#0000ff;#ff0000" dur="4s"
        repeatCount="indefinite" begin="rect1.mouseover" end="rect1.mouseout" />
</rect>
</g>
</svg>

Eventos de teclado

Podemos tambien controlar la animación mediante el teclado, de forma que al pulsar una tecla determinada se active o desactive la animación.

Los eventos de teclado se marcan también en los atributos begin y end con el siguiente valor:

begin="accessKey(caracter)"

Ponemos primero la palabra clave accessKey y después entre paréntesis el caracter de la tecla que activa la animación. Por ejemplo begin="accessKey(c)" activará la animación al pulsar la tecla "c".

De igual manera end="accessKey(f)" parará la animación al pulsar la tecla "f".

Podemos poner varios comandos de eventos en un mismo atributo siempre que vayan separados por punto y coma. Además los botones para eventos de ratón podemos ponerlos fuera del contenedor SVG siempre que lleven su correspondiente "id".

El ejemplo de la derecha lleva el sigiente atributo:

begin="accessKey(1);accessKey(c);on.click"

empezar ... acabar

Esto permite empezar la animación tanto al pulsar en la tecla "1", como en la tecla "c", como en el botón de empezar" de aquí arriba.

Para acabarla podemos usar la tecla "0", la tecla "f" o el botón de "acabar", para ello hemos puesto este código:

end="accessKey(0);accessKey(f);off.click"

El código completo de la animación es el siguiente:

<svg width="270" height="270">
<path id="ruta1" d="M50,180 c0,-200 100,-150 80,-50 s30,150 100,-70 l0,0 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"
        begin="accessKey(1);accessKey(c);on.click" 
        end="accessKey(0);accessKey(f);off.click">
        <mpath xlink:href="#ruta1" />
    </animateMotion>
</ellipse>
<rect x="5" y="245" width="260" height="20" 
    fill="lime" stroke="maroon" stroke-width="2"/>
<text x="10" y="260"  
    style="fill: maroon; font: normal 13px 'comic sans ms';">
    Teclas: "c" "1" empezar ; "f" "0" acabar</text>
</svg> 

El manual de SVG está llegando a su fin. En la última página veremos algunos aspectos que nos hemos dejado de SVG.

Más sobre SVG

Página creada por ANYELGUTI.

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

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

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