foto josé manuel mateos terrén

Crea animacion svg

Como crear una animacion web muy rapidamente svg o

svg de un cerdo volando

Este es el primer video que realizamos sobre animaciones web en dos minutos

Intentaremos explicar a través de varios videos como desarrollar animaciones web muy rápidamente

En este caso vamos a realizar un cerdo volando ,un gráfico svg que se moverá por la pantalla .

  1. Entraremos a nuestra pagina web www.animacionesweb.online
  2. Pulsaremos sobre el botón “Elementos animar” y elegiremos de la categoría Gráficos svg la familia animales ,allí tenemos unos cuantos animales, entre ellos el susodicha grafica svg de un cerdo ( lógicamente podrás añadir cualquier tipo de imagen svg que tenemos en nuestra web :-)
  3. Le daremos doble clic a la imagen del cerdo para llevar nuestro gráfico vectorial en forma de cerdo al el escenario de la animación Si todo ha ido bien tendrás un cerdo dentro de un recuadro, ese será nuestro lienzo svg si hay algún problema refresca la pagina web
  4. svg de un cerdo volando
  5. Movemos el cerdo con nuestra estrella de movimiento al punto de donde deseamos se inicie la animación
  6. Pulsamos sobre el botón crear Animaciones allí ,se nos abrirá un montón de opciones, tranquilos ya los iremos explicando poco a poco de momento le das al botón inicio de la escala porcentual y ” grabáis la propiedades actuales del objeto seleccionado con el botón”
  7. Movemos el grafico svg a las posiciones que deseemos que tenga en nuestra escala de tiempo y vamos gravando posiciones según lo deseemos
  8. Solo nos queda si lo deseamos poner el tiempo que dura la animación y apretar el botón de poner en marcha la animación para poderla ver en funcionamiento
Para guardar la animación click boton archivo y despues descargar el svg gratis, se abrirá un desplegable donde podremos seleccionar el código y pegarlo en nuestra página web. Como dato anecdótico si ponemos el nombre de la clase de la animación a cualquier objeto de nuestra página ejp: un rótulo o un párrafo este también realiza la animación Suerte y un saludo