Custom Ionic Splash + Animation

[Music] almost all good native mobile apps have one thing in common and that's a high-quality loading page when you enter the app for the first time in this episode I'm going to show you how to build your own high-quality splash graphics with ionic we're going to make sure the graphics and the animation look good on both iOS and Android and I'm going to take a different approach than other tutorials out there have taken most importantly I want to show you how to avoid this ugly white page if you're using animations in your splash page hit subscribe if you're new and follow along with the source code at angular firebase comm I am starting out from a brand new ionic app and using the side menu starter template before we do anything with animation I first want to show you how to generate an app icon and static splash page from the command line start by going into the resources directory and delete the icon and splash PNG files then you'll need to generate your own graphics and something like Photoshop or sketch the app icon needs to be at least a thousand 24 pixels and the splash page needs to be at least 2732 pixels once you have those created you can just go ahead and save them back in the resources directory with the same name splash and icon from there we can generate all of the icons we need for every single device on a given platform all you need to do is run I on it Cordova resources from the command line and it's going to do everything else for you this takes your source images and resizes them so they look good on the iPad iPhone and other mobile devices you can see the results by going under the platform directory under resources and looking at all the generated graphics if you open your app on a native emulator you should see the custom graphic as well as the custom splash screen that looks pretty cool and is probably enough for most apps but I still want to show you how to take things a step further by adding your own custom animation the easiest strategy in my opinion is to use a CSS animation but you could also use JavaScript here as well to keep things simple I'm going to use a pre-built open source animation but you could customize this in any way that you want you can control the behavior of the splash screen in your config dot XML file Apache Cordova has a number of different preferences or options that you configure to control the way the splash screen behaves on different platforms I recommend checking out the Cordova documentation just to get an idea of what each one of these preferences will do one strategy that I've seen used is to set the show splash screen option to false that will completely prevent the static image we created earlier from being displayed that might seem like what we want and it does kind of work but it does have one major problem it causes this white screen to appear briefly when the app is launched which might last for a second or two and kind of ruins the intro animation I think a better approach is to fade in from your static graphic in a way that looks seamless for the end user you can do that by simply matching the background from your static image to the actual CSS that you use for the animation but we still want to close that static graphic as soon as possible so we're going to make a few changes to our config I'm going to set the splash screen delay to 10 seconds which is way longer than we actually need but we're going to close it as soon as we can once the platform is ready so make sure to set a screen delay make sure that the auto-hide is set to false and that the show splash screen is set to true then we can hide it when the app is initialized which I onyx already going to do by default but just in case go into the app component and make sure you're hiding the splash screen when the app is initialized now from the same component we'll go ahead and import timer from rxjs then we'll define a property on this component called show splash which is set to true by default that will control the visibility of the animation and then back down in the initialize app method we'll set the timer and set it to false after 3,000 milliseconds all we have to do to start the timer is subscribe to it and it will execute this code when the time runs out now let's open the HTML for the app component basically all we're creating here is an overlay that's going to cover the screen until this show splash variable is set to false I'm just showing a basic loading spinner here but you could add your own custom complex SVG animation inside this element at this point we just need to round it out with some CSS I'm just going to copy and paste this animation from spin kit then I'm going to write my own class to make it behave like an overlay it has a position of absolute with a width and height % then a z-index with a large number just so it's displayed on top of other elements then we can use flexbox to ensure that it's responsive and displays the loading spinner directly in the center of the screen on any device and lastly I'll give it a background color to match our static graphic that we created in the first part then we can just paste in our spin kit code and we should be good to go if we pull the app up on iPhone X we should get the initial static image and then loading spinner right after that I'm going to go ahead and wrap up there if this video helped you please like and subscribe and if you're serious about building native apps with ionic I have a full course specifically for native development that should be out in the next couple weeks if you're a pro member you'll get access for free in addition to a whole bunch of other exclusive resources thanks for watching and I'll see you soon

Channel: Fireship

Views: 166,169

Keywords: angular, firebase, webdev, app development, typescript, javascript, lesson, tutorial, anular 5, ionic, native mobile app, ionic tutorial, ionic ios, ionic android, ionic splash screen, ionic loading, ionic 3 loading, ionic spash, ionic app icon, ionic animation

Id: dPUmskG_-y0

Length: 5min 29sec (329 seconds)

Published: Mon Feb 19 2018