Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. Animation

Cómo crear animaciones de aplicaciones móviles con SVGator

by
Read Time:12 minsLanguages:

Spanish (Español) translation by Johana Grisales Pérez (you can also view the original English article)

Diseñar animaciones mediante la codificación es una tarea compleja y que requiere mucho tiempo y puede obstaculizar la creatividad. Es por eso que los diseñadores buscan una solución sin código para crear escalables animaciones para aplicaciones móviles. Encontrar una manera de crear y exportar fácilmente este tipo de activos de marca atractivos también puedes hacer que la transferencia de diseñador a desarrollador sea un intercambio sin frustraciones.

SVGatorSVGatorSVGator

En este tutorial, aprenderás a crear animaciones para aplicaciones móviles con SVGator, una herramienta de animación SVG en línea. Verás lo rápido y simple que es diseñar una animación que luego puedes exportar directamente al marco de tu elección, React Native o Flutter.

Un gran avance en la animación de aplicaciones móviles

El animador con todas las funciones ayuda a los profesionales del diseño a crear animaciones de principio a fin sin tener que escribir una sola línea de código o utilizar aplicaciones / complementos de terceros. Para simplificar aún más las cosas para los desarrolladores de aplicaciones móviles, la función de exportación móvil multiplataforma de SVGator te permite exportar animaciones totalmente personalizables que se ejecutan tanto en Android como en iOS, empaquetadas de forma ordenada en un solo archivo ligero .svg.

Antes de entrar en la sección paso a paso de este tutorial, echemos un vistazo a lo que la función de exportación móvil de SVGator tiene para ofrecerte, para desarrolladores de aplicaciones móviles en particular.

  • Opciones de exportación multiplataforma para aplicaciones nativas: las animaciones se ejecutarán sin problemas tanto en aplicaciones de iOS como de Android.
  • Sin problemas de compatibilidad: no hay diferencia entre el rendimiento de tus animaciones dentro de un sitio web y el de las aplicaciones nativas.
  • Modo para un jugador: la instalación de un paquete que incluye el módulo de nodo del reproductor SVG de SVGator ayuda a reducir el tamaño de los archivos APK e IPA.
  • Las animaciones se ejecutan en modo sin conexión: tus animaciones pueden funcionar en aplicaciones móviles sin necesidad de una conexión a Internet.
  • Exporta un solo archivo: con un reproductor integrado o en modo de un solo jugador.

Una guía paso a paso para crear animaciones de aplicaciones móviles con SVGator

Ahora comencemos el proceso de creación para ver cómo funciona SVGator. Para empezar, tienes dos opciones: puedes crear su archivo SVG desde cero o comenzar con gráficos existentes. En este caso, comenzaremos con una ilustración SVG existente y dibujaremos solo una burbuja de pensamiento desde cero para familiarizarnos con las herramientas gráficas. Luego, también agregaremos tres íconos listos para usar de la biblioteca de activos.

Lo que crearemos

the animation we'll be buildingthe animation we'll be buildingthe animation we'll be building

Descarga todos los archivos aquí: activos estáticos y SVG animado.

Qué encontrarás dentro:

  • un archivo SVG estático que utilizarás para seguir junto con este tutorial
  • un archivo SVG estático con todos los elementos ya incluidos, por lo que puedes saltar y comenzar a animar en la sección 3
  • Animaciones finales en formatos .svg, .js (React Native) y .dart (Flutter)

Ve a la sección 3 — Anime para usar el archivo SVG con iconos incluidos.

Ve a la sección 5: Integración para probar las animaciones finales .js y .dart en una aplicación.

1. Cree un nuevo proyecto

Paso 1

Presiona el botón Importar SVG, luego elije el archivo llamado Científico (estático) .svg de los recursos proporcionados, y SVGator lo abrirás de inmediato. Puedes cambiar el nombre del proyecto en el campo superior izquierdo. Cambia el nombre a Científico.

how to import SVG with svggatorhow to import SVG with svggatorhow to import SVG with svggator
svgator after importsvgator after importsvgator after import

Paso 2

En el panel izquierdo, encontrarás todos los elementos del archivo SVG. Los elementos se pueden agrupar presionando Comando-G (Control-G). En nuestro ejemplo, el brazo, la cabeza y otras partes de nuestro personaje ya están en tus grupos separados, para facilitar la animación.

Si hay grupos de nivel superior innecesarios después de la importación, puedes desagruparlos presionando Comando-Shift-G (Control-Shift-G). En este ejemplo, la ilustración está recortada en un círculo. Las máscaras de recorte y los trazados de recorte aparecen como grupos subrayados en la lista Elementos.

Para cambiar el color de fondo, haga clic en el Lienzo en la parte superior de la lista de Elementos y luego elije la miniatura de color en el panel derecho, o escriba un código hexadecimal en el campo al lado. Usamos # 1C91FF, el color de fondo de nuestra aplicación. También puedes desmarcar este fondo en la exportación final si no lo necesitas.

change the SVG canvas colorchange the SVG canvas colorchange the SVG canvas color

2. Crea y agregua gráficos

En nuestra animación final, aparecerán íconos cuando nuestro personaje toque tu teléfono. SVGator tiene algunas herramientas muy convenientes para crear rápidamente elementos adicionales dentro de un proyecto, por lo que crearemos una burbuja de pensamiento para los íconos. Para facilitar esto, habilitaremos la cuadrícula frontal y Ajustar a la cuadrícula.

Paso 1

En el menú superior, habilitas la cuadrícula frontal. Luego habilitas Ajustar a la cuadrícula y desactiva la otra opción de ajuste por ahora, para facilitar el dibujo.

enable Front Grid and Snap to Gridenable Front Grid and Snap to Gridenable Front Grid and Snap to Grid

Ahora creemos la burbuja de pensamiento: dibuja un círculo, luego un cuadrado más pequeño debajo de él. Para poder editar formas básicas libremente, primero debes convertirlas en trazados. En este caso, convierte el cuadrado en una ruta para poder eliminar el punto de ancla inferior derecho. Finalmente, puedes combinar los dos elementos en uno solo con la herramienta Unión y duplicar la burbuja de pensamiento para crear un efecto de sombra.

Paso 2

Elije la herramienta Elipse de la barra superior. Dibujas un círculo a lo largo de las cuadrículas mientras mantienes presionada la tecla Mayús. Cambia el color a blanco en el panel derecho.

draw a circle with the Ellipse tooldraw a circle with the Ellipse tooldraw a circle with the Ellipse tool

Paso 3

Dibuja un cuadrado, cambias a la herramienta Transformar (V), haz clic derecho en el cuadrado y elige Convertir en trazado.

Ahora puedes seleccionar puntos de anclaje individuales. Selecciona el de abajo a la izquierda, has clic con el botón derecho y elije Eliminar nodos, y obtendrás un triángulo rectángulo.

convert the square to a path and remove a nodeconvert the square to a path and remove a nodeconvert the square to a path and remove a node

Paso 4

Seleccionas el triángulo y el círculo, y elijes la herramienta Unión de la barra superior para combinarlos en una sola ruta.

union the triangle and circleunion the triangle and circleunion the triangle and circle

Ahora que el globo de pensamiento está terminado, presiona Alt y arrastra ligeramente hacia abajo mientras mantiene presionada la tecla Mayús para crear el duplicado. Selecciona la herramienta Cuentagotas (i) y elije el color azul del fondo, luego cambia el modo de fusión a Multiplicar.

Paso 5

Para agregar los iconos a la biblioteca, elijes la pestaña Biblioteca y presionas el botón +. Aparecerá un cuadro de diálogo, donde puedes elegir los archivos SVG que deseas cargar.

add icons to the libraryadd icons to the libraryadd icons to the library
Simplemente has clic en un elemento de la biblioteca para agregarlo al escenario, y luego vuelves a colocarlo y escalar para que se ajuste al globo de pensamiento. Agrupa el icono y la burbuja de pensamiento. Puedes cambiar el nombre de los grupos y elementos haciendo doble clic en ellos. No es necesario agregar el resto de los íconos en este momento; puedes agregarlos mientras anima más tarde.
click on a library item to add it to the stageclick on a library item to add it to the stageclick on a library item to add it to the stage

3. Animar

Comenzaremos con el personaje tocando el teléfono. Puedes ocultar la cuadrícula y la regla en la interfaz de usuario en la barra superior y deshabilitar el ajuste a la cuadrícula.

Paso 1

Selecciona el grupo Armar en el panel de elementos y luego, con la herramienta Transformar (V) activa, mueves el punto de origen a la articulación.

select the arm group and rotate itselect the arm group and rotate itselect the arm group and rotate it

Con el grupo de brazos aún seleccionado, presionas el botón Animar y elija Rotar. A medida que arrastras la cabeza lectora en la línea de tiempo, se creará automáticamente un nuevo fotograma clave. Puedes girar el brazo hacia atrás para que la mano esté más alejada del teléfono.

Paso 2

Mueves el cabezal de reproducción y giras el brazo hacia el teléfono para agregar automáticamente un nuevo fotograma clave. También puedes usar el botón + para agregar fotogramas clave y girar el brazo después de eso.

create a new keyframe by rotating the armcreate a new keyframe by rotating the armcreate a new keyframe by rotating the arm
Para girar el brazo hacia atrás, mueve el cursor de reproducción hacia adelante, has clic con el botón derecho en el primer fotograma clave y elija Duplicar (o use las teclas de acceso rápido Comando-D / Control-D). Puedes obtener una vista previa de tu animación en cualquier momento con el botón Reproducir o presionando la barra espaciadora en tu teclado. Para hacer que la animación sea más suave y natural, agrega suavizado a los fotogramas clave como se muestra a continuación:
duplicate the first keyframe to rotate the arm backduplicate the first keyframe to rotate the arm backduplicate the first keyframe to rotate the arm back

Paso 3

Hay una lista de opciones de aceleración preestablecidas, pero también puedes utilizar la aceleración personalizada arrastrando los controles de la curva. Para esta animación, usamos Ease In Cubic en el primer fotograma clave y Ease Out Cubic en el segundo. Esto hace que el brazo se mueva lentamente hacia el teléfono, luego la acción de tocar es rápida y luego la mano se vuelve más lenta a medida que se eleva.

use easing for a more natural motionuse easing for a more natural motionuse easing for a more natural motion

Paso 4

Selecciona los tres fotogramas clave, mueve el cabezal de reproducción hacia la derecha y duplique (Comando-D / Control-D) la secuencia de fotogramas clave para cada toque. Obtén una vista previa de la animación mientras trabajas y no olvides guardarla. En este punto, necesitamos que la línea de tiempo sea un poco más larga. Para cambiar la duración de la animación en cualquier momento, presionas el icono de engranaje en el lado izquierdo de las opciones de aceleración.

repeat the animation in the timelinerepeat the animation in the timelinerepeat the animation in the timeline

Para animar la cabeza, haremos algo similar, pero con menos fotogramas clave.

Paso 5

Seleccionas el grupo Cabeza en el panel de elementos, mueves el punto de origen a la base del cuello y agregas el animador de rotación. Animas la cabeza para que mire hacia abajo al principio y vuelva a mirar hacia el final de la animación. Agrega suavidad a tus fotogramas clave.

move the origin point of the head to the base of the neckmove the origin point of the head to the base of the neckmove the origin point of the head to the base of the neck

Animamos las burbujas de pensamiento con los otros animadores principales: posición, escala y opacidad. Primero, seleccionas el grupo Burbuja de pensamiento y mueves el punto de origen hasta el centro de la parte inferior, para hacer que la burbuja se amplíe desde ese punto.

Paso 6

Donde la mano del personaje toca el teléfono, agrega los animadores de posición y escala. Selecciona y mueva estos fotogramas clave hacia la derecha, ya que en realidad son la segunda parte de la transición.

Agrega un animador de posición y acércalo al teléfono, luego redúzcelo a cero usando el panel derecho.

create a fade out effect with the opacity animatorcreate a fade out effect with the opacity animatorcreate a fade out effect with the opacity animator

Mueve el cabezal de reproducción al siguiente toque, agrega nuevos fotogramas clave y también agrega el animador de opacidad. Mueve el cabezal de reproducción un poco hacia la derecha, luego mueve la burbuja hacia arriba, escala a 0 y arrastra el control deslizante de opacidad a 0 para crear también un efecto de desvanecimiento.

Agrega una facilidad simple y obtén una vista previa para asegurarse de que todo se vea bien.

add easing and preview the animationadd easing and preview the animationadd easing and preview the animation

Paso 7

Ahora que una de las burbujas está animada, no tenemos que animar las otras dos. Podemos duplicar el primero, intercambiar el icono dentro del grupo y mover tus fotogramas clave en la línea de tiempo para que aparezcan uno tras otro. También volteamos la segunda burbuja y su sombra horizontalmente usando el botón Voltear en el menú superior, para agregar un poco de variedad. La línea de tiempo debería verse así cuando haya terminado:

completed animation timelinecompleted animation timelinecompleted animation timeline

4. Exportar

Ahora que la animación está terminada, exportémosla. Has clic en el botón azul Exportar en la parte superior derecha y aparecerá la ventana Opciones de exportación.

mobile export optionsmobile export optionsmobile export options

Elije la pestaña Móvil en el lado derecho. Las opciones de exportación se dividen en tres secciones:

Expediente

Puedes cambiar el nombre de tu archivo si lo deseas y elegir tu marco. En nuestro caso, elegimos React Native. También encontrarás información sobre el módulo necesario y podrás elegir si deseas dejar el reproductor incrustado dentro del archivo o cargarlo desde una ubicación externa. Aquí lo dejaremos incrustado ya que solo tenemos una única animación, pero esta configuración puede ser útil si planeas usar varias animaciones dentro del mismo diseño.

Animación

Queremos que nuestra animación se reproduzca en bucle, así que asegúrate de elegir Iteraciones: Infinito. Presionas Actualizar vista previa en la parte inferior de la ventana para ver los cambios aplicados.

Documento

Aquí puedes optar por incluir o excluir el color del lienzo. Si tu color de fondo se establecerá en la aplicación móvil, no necesitas este color en tu animación final.

Aquí hay un primer plano de la configuración final:

final mobile export optionsfinal mobile export optionsfinal mobile export options

5. Integrar

En este tutorial estamos trabajando con React Native, pero también mencionaremos los comandos de Flutter al final de esta sección.

Integrar la animación en una aplicación React Native

Primero, necesitamos instalar el módulo react-native-webview. Puedes obtener más información sobre React Native WebView en la página oficial del proyecto.

install the react-native-webview moduleinstall the react-native-webview moduleinstall the react-native-webview module

Dependiendo del administrador del módulo de nodo que estés utilizando (NPM o Yarn), el comando será ligeramente diferente. Para NPM, ejecuta el siguiente comando en la carpeta raíz de tu proyecto:

Para Yarn, ejecuta:

Nota: Para React Native anterior a la versión 0.60, deberás vincular manualmente WebView con el siguiente comando:

Opcional: si también tienes la intención de compilar en iOS, también deberás ejecutar este comando dentro de la carpeta ios:

Para completar la configuración de WebView, agrega las siguientes dos líneas a su archivo gradle, que se encuentra en /android/gradle.properties:

Una vez instalado WebView, la animación está lista para usarse. Simplemente copia el archivo .js exportado en la carpeta de tu proyecto.

add the animation to your react native codeadd the animation to your react native codeadd the animation to your react native code

Incluyes la animación en el componente en el que desees que se use, con la ayuda del siguiente código:

Ten en cuenta que las variantes de React Native no pueden responder completamente, así que asegúrate de establecer el ancho y el alto manualmente usando los argumentos width = {1024} y height = {768}.

preview the working animation in your apppreview the working animation in your apppreview the working animation in your app

Eso es todo, ¡tu animación debería funcionar en tu aplicación!

Integrar la animación en una aplicación Flutter

Para los usuarios de Flutter, deberás usar el módulo WebView Flutter. Dentro del directorio raíz del proyecto, ejecuta el siguiente comando para instalar el módulo WebView Flutter.

Para usar la animación Flutter generada por SVGator, copia el archivo .dart en la carpeta de tu proyecto e inclúyelo en el componente en el que deseas que se use, como se muestra a continuación:

Ten en cuenta que el nombre de la clase se deriva del nombre del archivo utilizado durante la exportación, por lo que si deseas utilizar un nombre diferente, tendrás que cambiar el nombre del archivo y el nombre de la clase.

Crea animaciones cautivadoras de aplicaciones móviles con SVGator

¡Eso es un envoltorio! Ahora has aprendido a crear, editar, animar, exportar e integrar una animación de aplicación móvil con SVGator. La herramienta tiene como objetivo hacer que el proceso de animación sea lo más fácil, intuitivo y sencillo posible. Con una extensa biblioteca de activos, animadores avanzados y todas las herramientas gráficas esenciales a mano, la creatividad es el único ingrediente principal que tendrás que agregar a la mezcla (junto con muchas vistas previas para asegurarte de que tus transiciones sean fluidas). ¡Las deslumbrantes animaciones de aplicaciones móviles están a solo unos clics de distancia!

SVGator es la única solución sin código para diseñar animaciones de aplicaciones móviles personalizables de principio a fin sin necesidad de aplicaciones, software o complementos de terceros. Para obtener más información sobre la gama completa de funciones que ofrece esta herramienta, consulta SVGator. Puedes inscribirte en el plan "Gratis para siempre" y poner a prueba este tutorial de inmediato. También vale la pena comprobar la presencia del animador en las redes sociales, en Instagram, Facebook y Twitter, para ver ejemplos de las extraordinarias imágenes que los diseñadores de tus comunidades han creado.

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.