ANIMACIÓ N

Los elementos usados para la animació n en SVG son derivados de SMIL

(Sychronized Multimedia Integration Languaje). Se tiene y elementos para
realizar las animaciones.

 Animate
 Animate Color
 AnimateTransform
 Set

Elemento <animate>
Este elemento se utiliza para animar cualquier atributo de un elemento contiene
los siguientes atributos bá sicos:

Attribute Name. Nombre del atributo a animar.

Attribute Type: Toma el valor “XMC” en caso de que el atributo e encuentra

definido en el elemento (fuera de style) o css cuando el atributo a animar forma
parte de las propiedades del atributo style.

From: valor inicial del atributo

To: valor final del atributo
Begin: Momento de inicio de la animació n
Dur: Duració n de la animació n
Fill: Generalmente toma el valor “freeze” para que el resultado de la animació n
permanezca.

Este elemento se coloca como contenido del elemento a animar.

<rect x=”10” y=”20” width=”100” height=”50”

Style=”Stroke:red ; fill: none”>

<animate attributeName=”width” attribute Type=”XML”

from=”100” To=”200” begin=”0s” dur=”l0s” fill=”freezer”/>

<animate attributeName=”heigth” attributeType=”XML” from=”50” to =”100”

begin=”55 dur”=”55”/>
</rect>

Atributo begin

El atributo begin indica el inicio de la animació n y podemos indicarlo de varias

formas:
En medida de tiempo:
0s, 3s, 5m, 3s+2s
Encadenar las animaciones

Begin= animl end

= anim 2 end + 3s.
= anim 3 begin.

<circle cx=”10” cy=”10” r=”0” fill=”red”>

<animate attributeName=”r” attributeType=”XML” from=”0” to=”10”
begin=”6s”/>

<animate id=”a1” attribute= “cy” attributeType=”XML” from=”10” to=”100”

begin=”11s” dur=”7s(m)(h)”/>
</circle>

<line x1=”5” y1=”10” x2=”5” y2=”50” Style=”Stroke: blue; stroke-width=f”>

from=”50” to=”100” begin=”a1.end+3s” dur=”5s”/>

<animate attributeName=”Stroke-width” attributeType=”CSS” from=”1”

to=”5” begin=”a2.end(.begin)” dur=”10s” />
</line>

Atributo valores

Con este atributo podemos crear animaciones que no necesariamente sean

lineales. Este atributo se usa junto con el atributo KeyTimes, el cual puede
contener valores entre 0 y 1 donde 0 es el inicio de la animació n y 1 es el final. El
# de valores en la lista de values y KeyTimes debe ser el mismo.

Elemento <set>
Si queremos cambiar el valor de una tributo no numérico en una animavion
usamos el elemento set. En estos casos el cambio no se realiza de forma
progresiva, si no que se realiza de golpe, los atributos de este elemento son los
mismos que en <animate>

<rect x=”10” y=”10” width=”20” height=”30” style=”visibility: hidden”>

<set attributeName= “visibility” attributeType=”CSS” to=”visible” begin”0s”
dur=”2s” fill”freeze”
</rect>

ELEMENTO <animateMotion>

Si queremos realizar el movimiento de algun element q traves de una

trayectoria(que no necesariamente sea una linea recta usamos este element. En
su forma mas bá sica mueve el elemento de un punto a otro.

<rect x=”10” y=”10” heigth =”20” width=”20”>

<animateMotion from=”0,0” to=”60,30” begin=”3s” dur=”10s” fill=”freeze”
</rect>

Pero puede colocarse una treyectoria mas compleja usando el atributo path.
<path d=”M-10,-3 LID,-3,-25z style=”fill:blue; stroke:red”>
<animateMotion
Path=”M150,125 C100,25 150,225,200,125”
Dur=”6s” rotate=”auto” begin =”0s” fill=”freeze”/>
</path>

En este casp el path contenido en la etiqueta no se muestra(curva). Al mostrarse

la animació n el triangulo se traslada en la trayectoria sin rotarse para adaptarse
a la curva, si queremos que realice esta adaptació n agregamos el atributo
ró tate=”auto” para que el elemento se ajuste al camino.

<path id=”curva” d=”M50,125 C100,25 150,225,200,125”

Style=”fill: none; stroke:blue”/>
<rect x=”-10” y=”-3” width=”10” height=”10”
Style=”fil:none; stroke:red”>
<animateMotion dur=”6s” rotate=”auto” fill=”freeze”>
<mpath xlink:href= “#curva”/>
</animateMotion>
</rect>

En este codigo hacemos uso del elemento <mpath> para utilizar un path definido
en otro lugar(fuera del animeMotion).

-Nubes, arboles, sol, luna, estrella , coche, aves

clibart

tarea que otros valores puede tomar el begin<