Animaciones de transición geniales con Shapes en Xamarin.Forms
If you prefer to read this article in English, please follow this link.
La versión oficial de Xamarin.Forms 4.7, incluyó por primera vez el control Shapes, bajo bandera experimental. Volviendo rápidamente al presente, en la versión actual (v5.0.0.2012), las cosas han cambiado mucho, Shapes dejó atrás la bandera experimental, y ahora es bastante estable en todas las plataformas soportadas (Android, iOS, UWP, WPF y macOS).
Shapes es un control muy poderoso, que nos permite dibujar fácilmente cualquier forma en la pantalla, como ser círculos, líneas, rectángulos, polígonos e incluso tomar valores de algún archivo de imagen svg y pegarlo en nuestra aplicación utilizando los paths.
Podemos utilizar este control para crear gráficos, fondos atractivos, controles de UI innovadores, etc., como se puede ver en este gran artículo de David Ortinau.
Otra de las herramientas más potentes de Xamarin.Forms son las Animaciones, que nos ayudan a dar vida a nuestra aplicación utilizando los controles predeterminados o creando nuestras propias animaciones personalizadas.
¡Animando Shapes!
Para que nuestra aplicación se destaque por encima de las otras, debemos crear algo realmente impresionante y juntar Shapes con animaciones parece ser un buen comienzo. Además, vamos a añadir a la mezcla, navegación entre páginas.
Seamos honestos, las animaciones de transición incorporadas en Xamarin.Forms son bastante aburridas y el plugin SharedTransitions creado por Giampaolo Gabba está muy bueno, pero solo contiene transiciones comunes, ampliamente utilizadas hoy en día en la mayoría de las aplicaciones.
¡Por eso vamos a crear algunas animaciones de transición impresionantes utilizando Shapes!
Antes de comenzar, algunas consideraciones para esta publicación:
- A pesar de que Shapes está disponible para UWP, WPF y macOS, nos atendremos únicamente a iOS y Android.
- Centralizaremos la mayoría de las navegaciones en el MainPage.
- Eliminaremos la toolbar original y la reemplazaremos por una falsa, para poder presentar las animaciones en pantalla completa.
- Estos son solo ejemplos, no un código de producción real.
¡Empecemos!
Para todas nuestras páginas utilizaremos un control Grid, para envolver todo el contenido de la página, con el fin de aprovechar la propiedad de superposición de controles.
También le estableceremos un x:Name a la toolbar y al contenido para hacerlos desaparecer durante la transición.
Ahora vamos a crear nuestro primer shape, en este caso queremos una gran flecha roja apuntando a la derecha.
Para eso, vamos a utilizar un control Path. Al comprobar la sintaxis podemos ver que el campo Data básicamente necesita: M para determinar el inicio del Path, junto a los puntos X,Y iniciales, luego con L definimos la línea y los diversos puntos X,Y que esta recorre para finalmente señalar el final del path usando Z.
Lo hacemos invisible y lo ocultamos en la parte izquierda de la pantalla.
En el handler del botón de nuestro code behind, simplemente llamamos a un método asíncrono en el main thread que ejecutará nuestra animación personalizada.
En la animación, activaremos la visibilidad del shape y haremos que se mueva de izquierda a derecha, mientras desvanecemos la toolbar y el contenido. Toda esta animación durará 350 milisegundos.
Como nuestra animación se ejecuta de forma sincrónica, necesitamos añadir un delay un poco más largo que la animación y finalmente ejecutar la navegación a la siguiente página.
Comprobemos el resultado:
Nuestra ArrowNavigationPage será casi la misma que la MainPage, pero la flecha apuntará a la dirección opuesta.
El code behind será casi el mismo, pero también añadirá un override para el back button de Android.
Y este será el resultado de la navegación hacia adelante y hacia atrás.
Para la transición de navegación a la segunda página, creemos shapes superpuestas.
Y haremos que se mueva de abajo hacia arriba
El resultado:
Ahora, para la animación de retorno nos pondremos un poco más creativos y creemos dos círculos usando la forma Ellipse, uno en la esquina superior izquierda de nuestra pantalla y el otro en la parte inferior derecha.
Haremos crecer un círculo desde la parte inferior derecha para volver a su tamaño original en la parte superior izquierda.
El resultado:
Continuando con nuestro “impulso creativo”, vamos a crear una animación de transición multipágina, es decir, una animación que comienza en una pantalla y termina en la otra.
Por eso, en Main Page añadimos algunos shapes ocultos a ambos lados de la pantalla.
En el code behind, crearemos una animación que cierra los shapes de panel que hicimos y navegamos hacia la página siguiente.
En la siguiente página, iniciaremos con los mismos shapes de paneles, pero estos comenzarán cerrados.
En el code behind, hacemos un override del método OnAppearing y ejecutamos la animación de apertura de los paneles.
El resultado:
Para la animación de regreso, hagamos algo aún más interesante.
Aunque algunos shapes son sencillos de hacer con paths, otros no lo son tanto o requerirían mucho tiempo para hacerlos, así que usaremos los path data de las imágenes SVG para eso.
Si tienen la suerte de contar con un diseñador/a de UI en su equipo, podrían pedirle que haga grandes diseños para utilizar en la app.
Caso contrario, pueden utilizar alguna herramienta como Figma para crear y exportar el código SVG:
Primero, crearemos el shape en Figma, luego hacemos click con el botón derecho del ratón sobre ella, busca la sección Copy/Paste y seleccionamos Copy as SVG.
Lo pegamos en nuestro editor favorito o visual studio y copiaremos el contenido dentro de la etiqueta d
Finalmente, lo pegaremos como Data en un path de Xamarin.Forms.
Ahora vamos a añadir todos los shapes en nuestra pantalla:
Recordemos que debemos agregar lo mismo en el Main Page, pero también que solo queremos activar esa animación cuando regresemos de una página específica, por lo que simplemente agregamos una bandera:
Ahora podemos añadir el resto del código en el code behind de PadlockTransitionAnimationShapes para la animación de retorno.
El resultado:
Para nuestro último ejemplo, vamos a estresar el motor con muchos shapes y animaciones corriendo al mismo tiempo en la pantalla. ¡Para ello haremos aparecer un pokemon salvaje como animación de transición!
Para este ejemplo añadiremos el pokemon como una imagen png, pero pueden buscar alguna imagen pokemon en formato svg para tomar el path 😉
Esta será nuestro shape en el Main Page
Y la animación del code behind:
El resultado:
Eso es todo amigos!
Como dije anteriormente, estos son solo ejemplos de cómo podemos explotar nuestra creatividad y ampliar los límites de Xamarin.Forms.
Si esta publicación los ayuda a crear increíbles animaciones de transición o quieren mostrar las cosas que han hecho, por favor, dejar un repo de muestra en los comentarios y se añadirá a la publicación más adelante.
También pueden ver mi repositorio de ejemplo completo para esta publicación en GitHub. 👇
Gracias por leer y a seguir codeando! 😁
