17.- Juegos y Multimedia HTML5 - Animando SVG

Hemos aprendido a dibujar gráficos vectoriales haciendo uso de la etiqueta svg en el capítulo número 16 del curso. Ahora vamos a ver como animar dichos gráficos.
Se pueden animar de varias formas las etiquetas SVG.

  • Usando etiquetas especiales como animateanimateTransform o animateMotion. Son escritas a la hora de crear los contenidos del canvas SVG y por lo tanto vas a ser siempre las mismas animaciones cada vez que se recargue la página.
  • Desde JavaScript se puede acceder y modificar las propiedades de las etiquetas. Propiedades como las coordenadas x e y en las que se encuentra un determinado gráfico. También se podrían crear etiquetas animateanimateTransform animateMotion desde JavaScript, lo que nos permitiría definir animaciones que dependan, por ejemplo, de inputs del usuario.
En este vídeo sólo veremos el uso de las etiquetas de animación, pues cambiar propiedades desde JavaScript es algo bastante sencillo una vez sabes crear un game loop.
También sería interesante decir que hay muchas más cosas que aprender sobre SVG, solo que en este curso no vamos a ver más. Como con la mayoría de los aspectos que vemos en el curso, deberías profundizar mucho más por tu cuenta sobre estos temas para dominarlos mucho mejor.


El código del archivo animandoSVG.html es éste que se encuentra aquí debajo. La página funcionando está aquí.

<!DOCTYPE html>
<html>
  <head>
    <title>Animando SVG</title>
    <style>

      body {
        background-color: orange;
        text-align: center;
      }

     </style>
     <script>
     </script>
    </head>
    <body>
     <svg width="400" height="400" viewBox="-200 -200 400 400">
      <defs>
          <line id="radio" x1="0" y1="200" x2="0"
                                     y2="-200" stroke="orange" />
          <radialGradient id="gradiente" cx="50%"
                                               cy="50%" r="50%">
                  <stop stop-color="black"  offset="0%"   />
                  <stop stop-color="red"    offset="50%"  />
                  <stop stop-color="orange" offset="100%" />
              </radialGradient>
              <path id="camino"
                                     d="M -200,0 Q -100,-100 0,0" />
      </defs>
      <g id="rueda">
       <circle cx="0" cy="0" r="0"
                                    fill="url(#gradiente)">
        <animate attributeName="r" dur="1s"
         from="0" to="200"
                                                repeatCount="1" fill="freeze" />
        <!--<set attributeName="r" to="0"
                                                begin="3s" dur="2s" />
        <animate attributeType="CSS"
                                                attributeName="opacity"
         from="1" to="0" begin="2s"
                                                dur="2s" fill="freeze" />-->
       </circle>
       <use xlink:href="#radio"
               transform="rotate(0)" />
       <use xlink:href="#radio"
               transform="rotate(10)" />
       <use xlink:href="#radio"
               transform="rotate(20)" />
       <use xlink:href="#radio"
               transform="rotate(30)" />
       <use xlink:href="#radio"
               transform="rotate(40)" />
       <use xlink:href="#radio"
               transform="rotate(50)" />
       <use xlink:href="#radio"
               transform="rotate(60)" />
       <use xlink:href="#radio"
               transform="rotate(70)" />
       <use xlink:href="#radio"
               transform="rotate(80)" />
       <use xlink:href="#radio" 
               transform="rotate(90)" />
       <use xlink:href="#radio"
               transform="rotate(100)" />
       <use xlink:href="#radio"
               transform="rotate(110)" />
       <use xlink:href="#radio"
               transform="rotate(120)" />
       <use xlink:href="#radio"
               transform="rotate(130)" />
       <use xlink:href="#radio"
               transform="rotate(140)" />
       <use xlink:href="#radio"
               transform="rotate(150)" />
       <use xlink:href="#radio"
               transform="rotate(160)" />
       <use xlink:href="#radio"
               transform="rotate(170)" />
       <animateTransform attributeName="transform"
                                        type="rotate" from="0" to="360" dur="24s"
                                        repeatCount="indefinite" />
      </g>
      <g>
       <circle cx="100" cy="0" r="50"
                                           fill="green" />
       <animateMotion
                                    path="M 100,100 100,-100 -100,-100 -100,100 Z"
           dur="4s" repeatCount="indefinite" />
      </g>
      <text x="-200" y="0" fill="white">
    En el pr&oacute;ximo videotutorial
    crearemos un men&uacute; para un juego :)
   </text>
   
   <text x="20" fill="white">
       <textPath xlink:href="#camino">
           El texto sigue un bonito camino ;)
       </textPath>
   </text>
     </svg>
    </body>
</html>

2 comentarios :

  1. SVG incorpora un lenguaje de programación llamado EMACS que le permite trabajar al SVG con JS, aun si no se ve desde un navegador.

    Algo que en JS es imposible xq las únicas aplicaciones que corren JS son los navegadores.

    ResponderEliminar