Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

Cómo animar fácilmente archivos SVG con SVGator

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

La animación SVG es una excelente alternativa al uso de GIF animados en la web, pero no siempre es fácil. En este tutorial voy a explicar cómo puedes animar fácilmente los SVG utilizando una herramienta en línea llamada "SVGator".

SVGator te permite importar archivos SVG y luego animar elementos individuales dentro de esos SVG.

Animar SVGs con SVGator

Una introducción rápida a SVGator

Puedes encontrar SVGator visitando www.svgator.com.

wwwsvgatorcom

SVGator es una herramienta de animación en línea de SVG, una suscripción por la cual (en el momento de escribir este artículo) cuesta $18 por mes o $12 por mes si se paga anualmente. Una prueba gratuita de 7 días está disponible para que puedas echarle un vistazo antes de comprometerse. Es muy fácil de utilizar, no requiere conocimientos de codificación y es multiplataforma.

Tras iniciar sesión, se te mostrarán todos los proyectos que has guardado. Puedes duplicarlos, borrarlos, descargarlos o editarlos en el editor de animaciones. La interfaz de usuario del editor te resultará familiar si alguna vez has usado Adobe Animate, After Effects o cualquier otro software de edición de video. El escenario principal contiene tu animación, mientras que una línea de tiempo muestra tus capas y fotogramas clave en la parte inferior:

SVGator UI

El panel de la izquierda es el hogar del árbol de Elementos, mostrando los elementos dentro del SVG, y a la derecha tienes más opciones, más un editor de código que te muestra el código que estás creando.

1. ¡Es suficiente, ahora animemos algo!

Vamos a utilizar SVGator para animar un par de gráficos de Envato Elements. El primero es de los Iconos de red de contactos profesionales.

Empieza en la página del panel de SVGator presionando Importar Nuevo (Import New). Sube tu archivo SVG estático y observa cómo se crea un nuevo proyecto.

En el panel Elementos del editor de animación, verás un menú desplegable de todos los elementos contenidos en el archivo SVG. Es posible que no tengan un nombre óptimo, pero puede mejorar eso asegurándote de que todas las capas de SVG tengan un nombre correcto en Adobe Illustrator (o tu software de edición) antes de importar el proyecto.

2. Selecciona un elemento para animar

Puedes seleccionar un elemento para animar haciendo clic en él en la lista Elementos o haciendo clic en el elemento en el escenario. Presionando el botón + junto al elemento, se agregará una capa a la línea de tiempo. Aquí hemos elegido el engrane grande, que tiene un nombre de capa extraño (pero eso no importa):

first element animation

3. Selecciona un animador

Con nuestro elemento añadido a la línea de tiempo, ahora debemos seleccionar un Animador de la lista. Las opciones disponibles son:

  • Posición
  • Giro
  • Escala
  • Opacidad

Mientras nuestro elemento esté seleccionado, haremos clic en Rotar, después seleccionaremos el tipo de suavizado que deseamos:

easing types

También podemos establecer las propiedades de esta animación, pero primero necesitamos crear algunos fotogramas clave en la línea de tiempo.

4. Crea algunos fotogramas clave

Un fotograma clave es un punto en la línea de tiempo donde ciertas propiedades cambian. Añade uno a la línea de tiempo de tu elemento presionando el botón +:

add a keyframe

A continuación mueve el depurador (encabezado de reproducción) a un punto adicional a lo largo de la línea de tiempo y añade otro fotograma clave. Con este segundo fotograma seleccionado, podemos editar las propiedades de rotación de nuestro elemento. Aquí hemos indicado que para el segundo fotograma clave nuestro elemento debería haber girado una vez (también podemos especificar los grados de rotación si lo preferimos).

rotational value

Haz clic en el botón de reproducción y verás tu bucle de animación.

5. Repite para el segundo engranaje

Ahora añade otro Animador a la línea de tiempo para el engrane más pequeño. Haz exactamente lo que hicimos con el primero para completar la animación.

Con la animación completa, puedes exportar el SVG final listo para su uso en la web.

6. Animación más compleja

Si ves el video, observarás que yo tomo otro gráfico de Envato Elements: Country Landscape y a continuación lo animo. Aquí está el resultado final:

El proceso es el mismo que hemos cubierto: identifica elementos para animar, añade animadores, coloca fotogramas clave en la línea de tiempo, cambia la facilitación y las propiedades, ¡luego exporta! Hay más elementos en esta animación en bucle (SVGator admite un máximo de 300), pero mira lo que ahora puedes hacer intentando recrear esta escena de paisaje campestre.

Conclusión

SVGator ofrece una forma sencilla de crear SVG para los tipos de animaciones a las que normalmente utilizarías GIF. Te da un control preciso, te permite guardar y editar proyectos, y los resultados finales son escalables y súper ligeros. ¡Pruébalo y haznos saber lo que piensas!

¿Estás interesado en aprender más sobre SVG?

Recursos útiles

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.