Cursos para compartir lo que sabes 3.201 cursos gratis
6.235.079 alumnos
6.235.079 alumnos
SMIL permite la incorporacion de animaciones basadas en tiempo dentro de un documento SVG. Realmente, dentro del documento SVG contamos con una serie de apoyos para poder animar cualquiera de elementos que hemos definido. Hay que tener en cuenta que cada animación definida variará los valores de uno de los atributos del elemento durante el periodo especificado (ya esté delimitado por la ejecución de un evento o por un tiempo fijo).
Para asociar una animación podemos:
Definirla a parte y asociarla a través del ID del elemento:
<animate xlink:href="#bubblesrect"
attributeName="y"
begin="aboutbubbles.click" dur="4s" to="10"
fill="freeze"/>
<animate xlink:href="#bubblesrect" attributeName="y"
begin="aboutbubbles.click" end="aboutbubbles.click" to="10"
fill="freeze"/>
Definirla directamente en el elemento que la
necesita:
<rect id="bubbleslabelrectinvis" pointer-events="all"
x="272" y="72" width="86" height="24"
rx="10" ry="10">
<set attributeName="opacity" attributeType="CSS"
to="0.5"
begin="bubbleslabelrectinvis.click"
end="bubblescrossrect.click"/>
</rect>
Ejemplos de animaciones:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd
">
<svg width="500" height="510" xmlns="http://www.w3.org/2000/svg
"
xmlns:xlink="http://www.w3.org/1999/xlink
">
<style type="text/css">
#bubbleslabelrectinvis { fill:#f00; stroke:
#700; stroke-width: 3; }
#aboutbubbles { visibility: hidden; }
.textrect { stroke:#888; stroke-width:2;
fill:#eee; }
.text { stroke-width:0; font-size:12;
font-family:Arial;
font-weight:300; fill:#444; }
.cross { stroke:#888; stroke-width:3;
stroke-linejoin:round;
stroke-miterlimit:0; stroke-linecap:round; }
</style>
<g id="base">
<rect id="bubbleslabelrectinvis"
pointer-events="all" x="272" y="72" width="86" height="24"
rx="10"
ry="10">
<set attributeName="opacity"
attributeType="CSS" to="0.5"
begin="bubbleslabelrectinvis.click"
end="bubblescrossrect.click; bubblescross01.click;
bubblescross02.click"/>
</rect>
</g>
<defs>
<g>
<animate
xlink:href="#bubblesrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="10" fill="freeze"/>
<animate
xlink:href="#bubblescrossrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="20" fill="freeze"/>
<animate
xlink:href="#bubblescross01" attributeName="y1"
begin="aboutbubbles.click"
dur="4s" to="24"
fill="freeze"/>
<animate
xlink:href="#bubblescross01" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="32"
fill="freeze"/>
<animate
xlink:href="#bubblescross02" attributeName="y1"
begin="aboutbubbles.click"
dur="4s" to="32"
fill="freeze"/>
<animate
xlink:href="#bubblescross02" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="24"
fill="freeze"/>
<animate
xlink:href="#bubblesminrect" attributeName="y"
begin="aboutbubbles.click"
dur="4s" to="20" fill="freeze"/>
<animate
xlink:href="#bubblesminline" attributeName="y1"
begin="aboutbubbles.click"
dur="4s" to="28"
fill="freeze"/>
<animate
xlink:href="#bubblesminline" attributeName="y2"
begin="aboutbubbles.click"
dur="4s" to="28"
fill="freeze"/>
</g>
</defs>
<g id="aboutbubbles">
<set attributeName="visibility"
attributeType="CSS" to="visible"
begin="bubbleslabelrectinvis.click" fill="freeze"/>
<set attributeName="visibility"
attributeType="CSS" to="hidden"
begin="bubblescrossrect.click; bubblescross01.click;
bubblescross02.click" fill="freeze"/>
<rect id="bubblesrect" class="textrect"
x="160" y="130" width="220" height="75"
rx="10"
ry="10"
/>
<rect id="bubblescrossrect" class="textrect"
x="350" y="140" width="16" height="16"
rx="1"
ry="1" />
<line id="bubblescross01" class="cross"
x1="354" y1="152" x2="362" y2="144" />
<line id="bubblescross02" class="cross"
x1="354" y1="144" x2="362" y2="152" />
<rect id="bubblesminrect" class="textrect"
x="326" y="140" width="16" height="16"
rx="1"
ry="1" />
<line id="bubblesminline" class="cross"
x1="330" y1="150" x2="338" y2="150" />
<rect id="bubblesmaxrect"
class="textrect" x="326" y="140" width="0" height="0" rx="1"
ry="1">
<animate attributeName="y"
begin="aboutbubbles.click" dur="4s" to="10"
fill="freeze"/>
</rect>
<rect id="bubblesmaxbox"
class="textrect" x="329" y="143" width="0" height="0" rx="1"
ry="1">
<animate attributeName="y"
begin="aboutbubbles.click" dur="4s" to="10"
fill="freeze"/>
</rect>
<text id="bubblestext"
class="text">
<tspan id="bubblestext00" x="170"
y="158">
<animate
attributeName="y" begin="aboutbubbles.click" dur="4s" to="38"
fill="freeze"/>
Ventana contextual
</tspan>
</text>
</g>
</svg>
Figure 22. smil-ventana.svg
<svg xmlns="http://www.w3.org/2000/svg
" xmlns:xlink="http://www.w3.org/1999/xlink
" viewBox="0 0 100 100">
<animate attributeName="viewBox" begin="zoomIn.click"
to="0 0 50 50" dur="12s" fill="freeze"/>
<g id="zoomIn">
<rect x="40" y="40" width="20"
height="4"/>
<rect x="48" y="32" width="4"
height="20"/>
</g>
</svg>
Figure 23. smil-mas.svg
<svg viewBox="-400 -200 1200 600">
<g>
<circle cx="100" cy="50" r="1000"
style="fill:#000"/>
<circle cx="100" cy="50" r="0"
style="fill:#F75">
<animate attributeName="r"
begin="0s" dur="10.8s" from="0" to="1200"/>
</circle>
<circle cx="200" cy="100" r="0"
style="fill:#FA8">
<animate attributeName="r"
begin="2s" dur="10.8" from="0" to="1200"/>
</circle>
<circle cx="300" cy="150" r="0"
style="fill:#FCB">
<animate attributeName="r"
begin="3.5s" dur="10.8" from="0" to="1200"/>
</circle>
<circle cx="400" cy="200" r="0"
style="fill:#FDC">
<animate attributeName="r"
fill="freeze" begin="4.5s" dur="10.8s" from="0"
to="1200"/>
</circle>
<circle cx="500" cy="250" r="0"
style="fill:#FED">
<animate attributeName="r"
fill="freeze" begin="5.25s" dur="10.8s" from="0"
to="1200"/>
</circle>
<circle cx="600" cy="300" r="0"
style="fill:#FEF">
<animate attributeName="r"
fill="freeze" begin="5.75" dur="10.8s" from="0"
to="1200"/>
</circle>
</g>
</svg>
Figure 24. smil-splash.svg
<svg xmlns="http://www.w3.org/2000/svg
" xmlns:xlink="http://www.w3.org/1999/xlink
"
id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360">
<g id="test-body-content" font-family="Arial"
font-size="30">
<g transform="translate(0, 0)">
<rect x="60" y="20" width="60"
height="210" fill="#dfdfdf"
stroke="#dfdfdf" stroke-width="1">
<animate id="largo1"
attributeName="width"
begin="0s" dur="4s" from="60" to="210" fill="freeze"/>
<animate id="ancho1"
attributeName="height"
begin="0s" dur="4s" from="210" to="310" fill="freeze"/>
<animate id="largo2"
attributeName="width"
begin="largo1.end" dur="4s" from="210" to="60"
fill="freeze"/>
<animate id="ancho2"
attributeName="height"
begin="ancho1.end" dur="4s" from="310" to="210"
fill="freeze"/>
<animateMotion id="abajo1" from="0,0" to="80,80"
begin="largo2.end" dur="3s" fill="freeze"/>
<animateMotion
id="zigzag1" values="80,80;10,0;0,10"
begin="abajo1.end" dur="3s" fill="freeze"/>
<animateMotion
id="arco1" path="M0,10 C0,10 40,40 80,0"
begin="zigzag1.end" dur="3s" fill="freeze"/>
</rect>
<rect x="60" y="20" width="50"
height="20" fill="#00ff55"
stroke="#008855"
stroke-width="1">
<animate
attributeName="width"
begin="0s" dur="4s" from="50" to="200" fill="freeze"/>
<animate
attributeName="height"
begin="0s" dur="4s" from="200" to="300"
fill="freeze"/>
<animate
attributeName="width"
begin="4s" dur="4s" from="200" to="50" fill="freeze"/>
<animate
attributeName="height"
begin="4s" dur="4s" from="300" to="200"
fill="freeze"/>
<animateMotion
from="0,0" to="80,80" begin="8s" dur="3s" fill="freeze"/>
<animateMotion
values="80,80;10,0;0,10" begin="11s" dur="3s"
fill="freeze"/>
<animateMotion
path="M0,10 C0,10 40,40 80,0" begin="14s" dur="3s"
fill="freeze"/>
</rect>
</g>
<g>
<rect x="320" y="100" width="40"
height="40" fill="#ffffff">
<animate id="fadein"
attributeName="fill" attributeType="auto"
from="#ffffff" to="#ff0000" begin="indefinite" dur="3s"
fill="freeze"/>
<animate id="fadeout"
attributeName="fill" attributeType="auto"
from="#ff0000" to="#ffffff" begin="indefinite" dur="3s"
fill="freeze"/>
</rect>
<g
id="buttons">
<a
xlink:href="#fadein">
<rect
x="320" y="10" width="60" height="40" fill="green"/>
<text
fill="white" font-size="10" font-weight="bold" x="330"
y="20">Oscuro</text>
</a>
<a
xlink:href="#fadeout">
<rect
x="320" y="50" width="60" height="40" fill="maroon"/>
<text
fill="white" font-size="10" font-weight="bold" x="330"
y="60">Claro</text>
</a>
</g>
</g>
</g>
</svg>
Figure 25. smil-movimiento.jpg
Hay 35 opiniones. Opina sobre este curso.
| Cursos | Valoración | Alumnos | Vídeo | |
|---|---|---|---|---|
|
Expresión gráfica El curso se comienza con una interrogante: ¿quieres conocer cómo expresarte creando objetos técnicos de manera gráfica tridimesnional? Hay un seguido de pasos e instrucci... [15/03/06] |
 |
1.902 | ||
|
Introducción a la fotografía digital La cámara digital ha irrumpido con fuerza en todos los ámbitos de la fotografía. Ya no se trata únicamente de un instrumento en manos de profesionales o del capricho de a... [18/02/05] |
 |
32.600 | ||
|
¿Cómo navegar con seguridad en Internet? La Seguridad en Internet no es sólo una preocupación empresarial. Toda persona tiene derecho a la privacidad y cuando ésta accede a Internet su necesidad de privacidad no... [07/12/07] |
 |
4.440 | ||
Publicar en 
del.icio.us 
digg 
meneame
