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 | |
|---|---|---|---|---|
|
MySQL básico. Bases de datos y software libre (cuarta parte) Curso de informática sobre MySQL básico incluida la instalación, configuración y descarga de MySQL. En esta cuarta parte de nuestro curso sobre Bases de datos y software ... [30/10/08] |
|
442 | ||
|
Cómo eliminar los ojos rojos con PhotoShop En esta práctica conoceremos los pasos necesarios para poder eliminar los ojos rojos de una fotografía.... [26/05/08] |
|
2.155 |
|
|
|
Google AdWords. Atraer clientes con marketing online Atraer al cliente tiene, en el marketing online y a google como su más poderosa herramienta, las mejores posibilidades para una empresa. Las empresas, ca... [31/07/09] |
|
535 |
|
|
Publicar en
del.icio.us
digg
meneame