Animated Splash Screen - Ionic 4.0

Question

Good day

My client has asked us to include an animated splash screen in our app, and have provided us with an animated GIF to use here.

So far I have yet to find any tutorials on how to do so in Ionic 4.0, although I did manage to find some for earlier versions of Ionic, like this great one by Josh Morony. There does however seem to be some great differences between how this should work in Ionic 4.0.

I thus have a question surrounding this that I would be very grateful if someone might shed some light on:

From what I understand from the above and other tutorials that I have read, it is physically impossible to have an actual animated splash screen as mobile devices automatically only load images for this purpose. The solution is thus to "fake" it by having your animation play once the app actually starts.

Considering this, I was wondering if it would be as simple as having our first page contain the animated GIF, then to continue to the the actual first page after the animation finishes.

To my understanding, this is largely what is happening in the above tutorial. The author does however use some Angular code to hide the original splash screen. This makes me wonder if, following these instructions, the splash screen would be replaced and the animation would play earier in the process of starting up the app than waiting for it to load. In essence the approach followed in the tutorial would happen faster than the simplified approach I suggest above.

So in short I guess I am asking weather it would be good enough to have our first page contain the animation, as explained above, or would this make the app appear slow and cumbersome?

Any advice would be greatly appreciated.

Answer 1

yes u can do animated splash screen take a look at those i made u can use the logic.

git repo one two.

u can usee lottie to achive the solution u want, like i made in those examples, u can make a animation in adobe after effect and export to json file and load it in your ionic animated splash screen.

link to lottie

lottie files

Answer 2

If you want to use a lottie animation before the HTML and JavaScript of your Cordova/Ionic application is loaded and able to display an animated version, you might want to check out the cordova-plugin-lottie-splashscreen. The plugin uses the native lottie-ios and lottie-android libraries to render a lottie animation from a file location or remote URL. The animation could be looped, automatically or programmatically hidden via your JavaScript calls once you've determined the Cordova app is ready.

Disclaimer: I'm the author of the described plugin.