() translation by (you can also view the original English article)
La animación SVG es una excelente alternativa al uso de GIFs animados en la web, pero esto no siempre es sencillo. En este tutorial SVG te explicaré cómo hacer un archivo SVG fácilmente utilizando una herramienta en línea llamada “SVGator”.
SVGator te permite importar archivos SVG y luego animar elementos individuales dentro de esos SVG.
Animación SVG con SVGator
Una Introducción Rápida a SVGator
Puedes encontrar SVGator visitando: www.svgator.com.
SVGator es una herramienta en línea de animación 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 siete días está disponible para que puedas echarle un vistazo antes de comprometerte. Es muy fácil de utilizar, no requiere conocimientos de programació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 utilizado 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 en la parte inferior.
El panel de la izquierda es el hogar del árbol de Elementos, que muestra los elementos dentro del SVG, y a la derecha tienes más opciones, así como un editor de código que te muestra el código que estás creando.
1. Suficiente, ¡Ahora Animemos Algo!
Para este tutorial SVGator usaremos un par de gráficos de Envato Elements. El primero es de los Iconos de redes profesionales:
¿Cómo hacer un archivo SVG? Comienza en la página del panel de SVGator presionando Importar Nuevo (Import New). Sube tus archivos SVG estáticos y observa cómo se crea un nuevo proyecto.
En el panel de Elementos del editor de animación SVG, verás un menú desplegable de todos los elementos incluidos en los archivos SVG. Es posible que no tengan un nombre óptimo, pero puedes 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 sobre el en la lista de Elementos o dando 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í elegimos el engrane grande, que tiene un nombre de capa extraño (pero eso no importa):
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 y después seleccionaremos el tipo de suavizado que deseamos:
También podemos establecer las propiedades de esta animación, pero primero necesitamos crear algunos fotogramas clave en la línea del tiempo.
4. Crea Algunos Fotogramas Clave
Un fotograma clave es un punto en la línea del tiempo donde ciertas propiedades cambian. Añade uno a la línea de tiempo de tu elemento presionando el botón +:
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. Cone 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).
Haz clic en el botón de reproducción y verás tu bucle de animación.
5. Repite para el Segundo Engranaje
Ahora agrega otro Animador a la línea del 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 los archivos SVG finales para su uso en la web.
6. Animación Más Compleja
Si ves el video, observarás que tomé otro gráfico de Envato Elements: Country Landscape y a continuación lo animé. Aquí está el resultado final:
El proceso es el mismo que hemos cubierto en este tutorial SVG: identifica elementos para animar, añade animadores, coloca fotogramas clave en la línea de tiempo, cambia la facilitación y propiedades, ¡luego exporta tu animación SVG! 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 animar SVG para las animaciones a las que normalmente utilizarías GIFs. Te da un control preciso, te permite guardar y editar proyectos, y los resultados finales son escalables y muy ligeros. ¡Pruébalo y haznos saber lo que piensas!
¿Te Interesa Aprender Más Sobre cómo Animar SVG?
3 formas de crear bordes en ángulo con SVG
Cómo crear un ícono de carga con animaciones SVG
SVG Viewport y viewBox (para principiantes absolutos)
Cómo crear imágenes SVG responsivas
Recursos Útiles
- svgator.com
- Iconos de Redes Profesionales en Envato Elements
- Country Landscape en Envato Elements
