Cómo usar SVGator para animar sus archivos SVG

Los gráficos vectoriales escalables (SVG) son fantásticos si desea diseñar sitios web compatibles con dispositivos móviles (¡que deberían!). Son completamente escalables, ligeros, y la mejor parte es que puedes animarlos (a diferencia de las imágenes habituales). El problema es que la animación de un SVG puede ser complicada si no está disponible con las hojas de estilo aguijón (CSS). Afortunadamente, hay muchas herramientas que simplifican todo el proceso de animación. En este artículo, presentaremos uno de nuestros favoritos, llamado Svgator. Luego le enseñaremos cómo usarlo para animar archivos SVG.
¡Pongámonos a trabajar! Por qué debe usar SVGS a primera vista, los SVG se ven igual a cualquier otro tipo de imagen. Sin embargo, si observa apariciones anteriores, este tipo de archivo especial es único por varias razones. Hablemos de lo más importante:
Se basa en vectores. En la mayoría de los casos, las imágenes que ve en los sitios web se componen de píxeles. Con SVGS, se trata de vectores, que se unen a los próximos puntos.
Son muy escalables. Los archivos basados ​​en vectores conservan su calidad, independientemente de la resolución que muestre. Esto hace que SVGS sea uno de los tipos más amigables de archivos que puede usar.
Son fáciles. Debido a que está tratando con vectores en lugar de píxeles, los archivos SVG tienden a ser más livianos, lo que se traduce en tiempos de carga más cortos.
Puedes animar tus vectores. Con SVGS, puede usar CSS y JavaScript para animar sus vectores. Podrías obtener efectos similares usando GIF, por ejemplo, pero tienden a ser increíblemente pesados.
A pesar de sus numerosas ventajas, los SVG no se ajustan perfectamente a cada situación. Si desea mostrar gráficos complejos, como fotos, por ejemplo, recomendamos usar formatos de archivo tradicionales como JPEG. Reproducir con vectores, el uso de SVG tiene mucho más sentido. Este enfoque no solo garantiza que sea receptivo, sino que también puede escapar de unos pocos milisegundos durante el tiempo de carga. En el pasado, ya hemos hablado sobre cómo animar archivos SVG utilizando el enfoque manual de CSS. Ahora, verifiquemos qué puede hacer usando un servicio especializado. Introducción a Svgator
Svgator es una herramienta muy simple. Le permite importar archivos SVG y animarlos utilizando marcos clave una colección de efectos predefinidos. Tienes mucho control sobre cómo muestran las animaciones y su momento. Incluso le permite agregar varios tipos de animaciones al mismo archivo SVG, lo que puede ser complicado si las agrega con CSS.

Con SVGator, puede jugar con la posición, la rotación, la escala y la opacidad de los vectores. No es la lista más completa de configuraciones, pero el instrumento en sí es bastante fácil de usar. Características clave:
Importe y anime sus archivos SVG favoritos.
Gire la posición, la rotación, la escala y la opacidad de los archivos.
Use marcos clave para el control total sobre las animaciones.
Mezcle y combine animaciones como desee.
Precio: período de prueba de siete días gratuito con planes que comienzan en $ 18 por mes | Más información sobre cómo usar SVGator para animar las nociones básicas de sus archivos SVG con SVGator son simples. Simplemente haga clic en el botón de inicio de sesión ubicado en la página de inicio y configure una nueva cuenta. No tiene que ingresar ninguna información de pago para utilizar el período de prueba de siete días de la plataforma, por lo que puede probar el servicio exhaustivo sin contratar. Una vez que su cuenta esté lista, la plataforma lo redirigirá al tablero donde tiene lugar donde tiene lugar. toda la magia. Tan pronto como abra SVGator, verá una imagen de prueba que incluye algunas animaciones simples que la plataforma utiliza para mostrarle lo que puede hacer:
Para ver esta animación de prueba, haga clic en el botón Reproducir en la parte inferior de la pantalla:
Puede importar archivos SVG haciendo clic en el botón Importar SVG en la parte superior de la pantalla. Cuando haga esto, SVGator detectará y estratificará automáticamente sus elementos en la pestaña dedicada:

El temporizador, por ejemplo, consta de tres elementos. Los círculos internos y exteriores y el botón prominente en la parte superior. Si hace clic en cada componente en la pestaña izquierda, resaltará la sección apropiada.

En la parte inferior de la pantalla, hay una cronología que muestra todas las animaciones que ha agregado a su archivo SVG. Los iconos de diamantes en la cronología representan marcos clave y puede moverlos para cambiar la sincronización de animaciones:


Por defecto, SVGator muestra solo tres segundos en su cronología, pero puede cambiar esto haciendo clic en el icono de la rueda junto al temporizador a la izquierda de la pantalla: aparte de cambiar la longitud total de la animación, también puede activar el “MouseOver” Opción, lo que significa que su animación no se activará hasta que ponga el cursor sobre él.
Ahora, continúe y juegue con los marcos clave en la cronología, para que pueda tener una idea de las diferencias de sincronización que puede hacer. Cuando esté listo, puede agregar nuevas animaciones haciendo clic en el elemento que desea cambiar usando los selectores a la izquierda de la cronología. Después de resaltar un elemento, busque la pestaña Animador y haga clic en el efecto que desea agregar:

Por ejemplo, si elegimos el efecto de opacidad para todo el SVG, podemos hacer que se desdibuja a medida que avanza la animación. Para hacer esto, establezca un efecto de opacidad del 10% bajo el elemento del temporizador:

Notará que establecemos el marco de clave inicial en la marca de dos segundos. Sin embargo, SVG comenzará con una opacidad del 10%, a menos que cerremos el bucle agregando un marco clave al 100% de opacidad al comienzo de la cronología:
Para agregar marcos de teclas adicionales a cada animación, simplemente haga clic en el diamante azul en cada elemento junto a la cronología. Algunas animaciones, como la opacidad, solo le permitirán sumar dos marcos clave, mientras que otras, como la posición, pueden admitir más. Ahora, los dos marcos clave están en su lugar, así que haga clic en el botón Reproducir para ver el temporizador se desvanece a medida que avanza la cronología:

Para resumir, la adición de animaciones con SVGator se reduce a elegir los efectos deseados para cada elemento y agregar marcos clave para indicar su progreso. Puede mezclar y ver animaciones y ajustar sus valores para lograr resultados únicos, pero el proceso siempre sigue siendo el mismo. Una vez que esté satisfecho con sus animaciones, puede exportar los archivos utilizando el botón SVG Exportar en la parte superior de la pantalla y guardarlas. Luego, es solo una cuestión de cargarlos en WordPress después de activar el soporte para el tipo de archivo SVG en su instalación. Conclusión agregar un poco de estilo a su sitio web usando animaciones puede ser un toque agradable. Con la ayuda de SVGS, puede asegurarse de que sus gráficos escalarán, sin importar el servicio que usen sus visitantes de esta manera, sus animaciones siempre se verán increíbles. Sin embargo, animar un archivo SVG requiere el uso de CSS. Esto no es un problema si no le importa mezclar con un código en particular. Sin embargo, puede ser difícil obtener el efecto exacto que desea, especialmente si no es un experto en codificación. Con herramientas como SVGator, puede elegir qué animaciones implementar, probarlas y luego agregar el archivo SVG resultante a su sitio web.

¿Tiene alguna pregunta sobre cómo animar los archivos SVG? ¡Hablemos de ellos en la sección de comentarios a continuación! Imagen en miniatura del artículo de Molnia / Shutterstock.com.