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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:

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.

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:

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.

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:

1

npm install react-native-webview

Para Yarn, ejecuta:

1

yarn add react-native-webview

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

1

react-native link react-native-webview

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

1

pod install

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

1

android.useAndroidX=true

2

android.enableJetifier=true

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

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

1

import Scientist from './Animations/Scientist.js';

2

3

4

const App: () => Node = () => {

5

    return (

6

        <View>

7

            <Scientist width={null} height={null} />

8

        </View>

9

    )

10

};

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}.

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.

1

flutter pub add 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:

1

import 'package:flutter/material.dart';

2

import 'Scientist.dart';

3

4

void main() {

5

    runApp(MyApp());

6

}

7

8

class MyApp extends StatelessWidget {

9

10

	final _expandedKey = UniqueKey();

11

12

	@override

13

	Widget build(BuildContext context) {

14

		return MaterialApp(

15

			title: 'Welcome to Flutter',

16

			home: Scaffold(

17

				appBar: AppBar(title: const Text('Welcome to Flutter'), ),

18

				body: Column(

19

					children: [

20

						Scientist()

21

					],

22

				)

23

			),

24

		);

25

	}

26

}

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.