Aitor Sánchez - Blog - Nov. 1, 2023, 10:12 a.m.
¿Pensando en mejorar las transiciones entre vistas de tu aplicación? O, quizás ya sabes cómo puedes hacer algo así con el componente Native Page Transitions Ionic, pero aún te falta algún detallito más para dejarlo cómo tu quieres ¿verdad?
Mi nombre es Aitor Sánchez, hago aplicaciones móviles desde 2014, y en este artículo aprenderás a mejorar las transiciones entre vistas de tu app mediante el componente Native Page Transition Ionic de manera sencilla y accionable.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y ahora si, comenzamos. Let´s go!
En primer lugar, y cómo con todos los módulos desacoplados del core, tenemos que realizar la instalación del plugin dentro de nuestra app. Para ello vamos a utilizar las dos siguientes líneas de consola:
ionic cordova plugin add com.telerik.plugins.nativepagetransitions
npm install @awesome-cordova-plugins/native-page-transitions
La primera será la encargada de instalar el código nativo necesario que haga de puente entre nuestra app y la parte nativa del sistema.
El segundo es el encargado de instalar el código necesario para poder comunicarse desde nuestro código TypeScript con la parte nativa del plugin.
Bien, en caso de que no estemos usando el módulo ngx, o usemos una versión inferior a Ionic 4, necesitamos incluir los providers del componente en nuestro module para poder utilizarlos. Lo haremos de la siguiente manera:
...
import { NativePageTransitions } from "@awesome-cordova-plugins/native-page-transitions/ngx";
...
providers: [
...,
NativePageTransitions,
...
]
....
Recuerda que no es necesario que lo hagas en el módulo principal de la aplicación “app-module.ts”. Basta con que lo incluyas en el módulo del componente donde lo vas a utilizar. Quizás esto no tiene mucho sentido aquí, por este si se usa, se usará en toda la app, pero es bueno tenerlo presente siempre. Por que así aumentaremos el rendimiento de la app exponencialmente y a parte estaremos incurriendo en buenas prácticas. Visto esto, continuemos.
Bien, al tratarse de transiciones nativas, no tendría mucho sentido que estuviese disponible para el navegador, o para pc, así que nos podemos imaginar cuales son, y son las siguientes:
Cómo era de esperar, plataformas móviles. Sigamos
Bien, pues ahora vamos a pasar a explicar cómo tenemos que usar el componente. Pero primero, y cómo en todos los tutoriales, vamos a ver un ejemplo de código primero y luego explicamos sobre él.
import { NativePageTransitions, NativeTransitionOptions } from '@awesome-cordova-plugins/native-page-transitions/ngx';
constructor(private nativePageTransitions: NativePageTransitions) { }
...
//Este es un ejemplo de salida de página
ionViewWillLeave() {
let options: NativeTransitionOptions = {
direction: 'up',
duration: 500,
slowdownfactor: 3,
slidePixels: 20,
iosdelay: 100,
androiddelay: 150,
fixedPixelsTop: 0,
fixedPixelsBottom: 60
}
this.nativePageTransitions.slide(options)
.then(onSuccess)
.catch(onError);
}
// Este es un ejemplo de entrada en la página
openPage(page: any) {
this.nativePageTransitions.slide(options);
this.navCtrl.push(page);
}
La verdad que, a simple vista, no es nada complicado de utilizar.
En primer lugar, importamos las clases NativePageTranstions y Native TransitionsOptions. La primera es la clase que hará la magia y la segunda será la interfaz que contenga los parámetros para la primera.
Después, en el constructor, inyectaremos una instancia de NativePageTransitions. Si estamos en una versión inferior de Ionic 4, o no estamos usando el módulo ngx, esto no va a funcionar a menos que lo hayamos puesto en los providers del módulo de la clase, o en los del padre.
Posteriormente, vamos a sobreescribir el método ionViewWillLeave, que se dispara cuando estamos a punto de dejar la vista de este componente. Aquí dentro vamos a colocar nuestro código.
Crearemos una instancia de NativeTransitionOptions con los parámetros que se pueden ver en el código.
La función slide, que es la que vamos a utilizar ahora, es la que nos permite hacer la magia. Le pasamos los parámetros que hemos construido en el punto anterior y listo. La magia surgió. :)
Un poco más abajo, y cómo vemos en el ejemplo, podemos sobreescribir la función openPage para hacer lo mismo, pero en este caso una fusión de entrada en lugar de salida.
Pues hasta aquí hemos llegado con el ejemplo, ahora vamos a continuar un poco más explicando los campos y el resto de funciones que tenemos disponibles.
Cómo en todos los tutoriales, vamos a ver los campos y los métodos que tenemos disponibles para usar con esta clase.
Cómo hemos visto en el ejemplo de código, es la función que nos permite realizar la mágia. Es la que hace el fundido que queramos tanto de entrada cómo de salida con los parámetros dados mediante “options”.
Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien, en caso contrario fallará.
Es una función similar al anterior, pero en lugar de tener un efecto slider, tenemos un efecto flip.
Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien, en caso contrario fallará.
Igual que las anteriores, pero esta vez con un efecto fade.
Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien, en caso contrario fallará.
Igual que las anteriores, pero esta vez con un efecto drawer.
Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien, en caso contrario fallará.
Igual que las anteriores, pero esta vez con un efecto curl.
Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien, en caso contrario fallará.
En caso de que haya acumuladas transiciones, si llamamos a esta función se ejecutarán todas de golpe.
Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien, en caso contrario fallará.
En lugar de ejecutar todas de golpe cómo en la función anterior, este cancelará todas las que están a la espera.
Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien, en caso contrario fallará.
Cómo hemos visto a lo largo y tendido del artículo, esta interfaz ha estado presente en él. Bien, para terminar, veamos los campos que tiene y acabemos ya el artículo.
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.