SVG / JavaScript

<< Anterior Parte
Siguiente Parte >>

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>
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>
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>
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>
smil-movimiento.jpg

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO