▷ Native Page Transitions 【 Ionic 】 de principiante a avanzado en 2020

¿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? Algo cómo los parámetros de una función o el valor de un campo de clase ¿cierto?

Si has respondido que sí, cómo es lógico, si no, no estarías aquí, déjame decirte que no eres el primero, ni serás el último, que entra a esta publicación a intentar dar respuesta a estas preguntas. Y lo consigue.

Te digo más, hasta los que somos más expertos usamos estos artículos cuando vamos a utilizar algo que no hemos usado desde hace mucho, o que no hemos utilizado nunca.

Por si no me conoces aún, 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.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Consultar estructura del artículo

1 Instalación de Native Page Transitions
2 Configuración del componente
3 Plataformas soportadas por Native Page Transitions
4 Cómo se usa Native Page Transitions en Ionic
5 Funciones y campos de Native Page Transitions
6 NativeTranstionOptions
7 Más tutoriales de Ionic
8 Para terminar, el vídeo tutorial de Native Page Transitions

Instalación de Native Page Transitions

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.

Configuración del componente

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.

Plataformas soportadas por Native Page Transitions

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:

Android
iOS
Windows Phone 8

Cómo era de esperar, plataformas móviles. Sigamos

Cómo se usa Native Page Transitions en Ionic

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.

Funciones y campos de Native Page Transitions

Cómo en todos los tutoriales, vamos a ver los campos y los métodos que tenemos disponibles para usar con esta clase.

slide(options:NativeTransitionOptions)

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