Cómo usar un lottiesplash screen con capacitor y android studio

¿Cómo usar un lottiesplash screen con capacitor y android studio?

Para usar un lottie como splashscreen en ionic capacitor version 5 se debe realizar la instalación del plugin cordova-plugin-lottie-splashscreen en su última versión y en este ejemplo se usa capacitor version 5 para lograrlo, en este articulo te comentamos como realizar el uso de un splash de manera rapida y sencilla.

Para iniciar lo primero es realizar la creación de un proyecto en ionic 6, para el ejemplo fue utilizada la versión de CLI de ionic en 6.20.1. Usando el comando:

ionic start lottiesplash --type=angular

Se creará un proyecto llamado lottiesplash usando el framework angular, luego en el proyecto procedemos a importar la librería a utilizar con el siguiente comando:

npm i cordova-plugin-lottie-splashcreen

Al instalar la librería realizaremos uso de ella en el archivo capacitor.config.json, añadiremos las preferencias de LottieFullScreen, LottieHideAfterAnimationEnd y LottieAnimationLocation.Nuestro archivo queda configurado de la siguiente manera:

ionic capacitor add android
ionic capacitor add ios

Finalmente generamos el proyecto para ejecutarlo en android studio:

ionic capacitor build android --prod

Con esto realizado y al ejecutar el proyecto en android studio en el emulador, puede suceder 2 situaciones, la primera todo funciona correcto y la segunda tenemos un error:

Attempt to invoke interface method 'void org.apache.cordova.CordovaWebViewEngine.evaluateJavascript(java.lang.String, android.webkit.ValueCallback)' on a null object reference
at de.dustplanet.cordova.lottie.LottieSplashScreen$addAnimationListeners$1.onAnimationStart(LottieSplashScreen.kt:284)

Este error tiene una solución un poco triquiñuela, la cual es comentar todas las lineas donde se menciona la palabra webView de la función addAnimationListeners() en el archivo LottieSplashScreen. La función quedaría de la siguiente manera:

private fun addAnimationListeners() {
    animationView.addAnimatorListener(
        object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
                //webView.engine.evaluateJavascript("document.dispatchEvent(new Event('lottieAnimationStart'))") { }
            }

            override fun onAnimationEnd(animation: Animator) {
                //webView.engine.evaluateJavascript("document.dispatchEvent(new Event('lottieAnimationEnd'))") { }
                val hideAfterAnimationDone = preferences.getBoolean(
                    "LottieHideAfterAnimationEnd",
                    false
                )
                when {
                    hideAfterAnimationDone -> dismissDialog()
                }
                animationEnded = true
            }

            override fun onAnimationCancel(animation: Animator) {
                //webView.engine.evaluateJavascript("document.dispatchEvent(new Event('lottieAnimationCancel'))") { }
            }

            override fun onAnimationRepeat(animation: Animator) {
                //webView.engine.evaluateJavascript("document.dispatchEvent(new Event('lottieAnimationRepeat'))") { }
            }
        }
    )

Al ejecutar de nuevo el proyecto el lottie funcionará correctamente en el emulador, esperamos esta guía haya sido de ayuda y pueda añadir lottie como pantallas de carga a tus aplicacion esn angular. 

Como Anexo te dejamos el archivo package.json para comparar las librerías del proyecto: