![]() ![]() Keep the animation duration small (less than 3 seconds).We could even send more than one animation at once, scheduled for different dates, and the app would know which one to render!Īlso, using some kind of cache, depending on where you stored your animation, you can prevent it from downloading the same information multiple times and save some bytes from the user's data plan. To overcome this problem, we decided to: download the animation at some time after the splash is loaded, and the next time the app is opened, render the stored animation. The trick is: Do not download it during the splash time! Network requests are unpredictable, unreliable… they can basically fail and you would make your user wait on an empty screen for much longer than he would need, just to maybe display an animation. ![]() We have a lib that allows us to animate everything, we have established standards to our animation run on every device, now we just need to be able to update it whenever we want.ĭo you remember that the Lottie animations are just JSONs? You can create an API that returns you the animation based on the current date or simply store it as a file on the Amazon S3 and download it anytime you want! But hey, this is a initial version, we can totally improve it later □. I'm not gonna lie to you, the side-to-side animation will probably be discarded, the animations will need to rely much more on the center of the screen using cross-dissolves and other transitions to appear from the solid background. Positioning the animation is tricky, if you make it go side to side on the screen considering just one device size, it may look weird on a bigger device, because it will start on the middle of the screen and give a not very refined feeling, or worse, it could rescale and become something really big and scary to see.ĭefining a fixed proportional animation frame in the middle of the screen for every device Chill, they are the ones who are going to animate it, but you still have to place it on the app. Imagine your motion designer wants to make a rocket to come from the left side of the screen, spin around, and leave on the right side. But suddenly, you are faced with a new issue: the animation placing. It's on! We have the design team on our side, everyone is excited to create a totally new experience, and people start having ideas. Now we just need to use all the power Lottie gives us inside our Splash Screen. It means they are easy to store, easy to download, easy to share… easy to everything! So, Lottie is a very useful library, but maybe I didn’t emphasize enough a high point of it, it uses JSONs and JSONs are just good old strings. ![]() This gives us an easy way to add super fancy animations on the app - our motion designers can create incredible movable illustrations, and we can display, move, update them on the app with little effort. The real splash screen is optimized to load as fast as possible, and the secondary splash has the same background color, so the transition between them is seamless, and if you are not aware it's happening, it's undetectable.Įxample of an animation generated with a Lottie JSON But we have a few things that we need to load on the app start, so we created a secondary splash (where the actual loading happens). It's a solid color screen (iOS splash screens cannot be dynamic □). The actual app's splash screen is not really animated. So I threw the idea: Making a series of visual changes on the app to celebrate the holidays! And also, make them somehow remotely updatable so we could change it any time of the year.Īnd our main star: A new holiday-themed splash screen animation. And it worked! Everyone came in really curious about what could it be. I gathered some of the designers and managers with a not-so-clear meeting title: Christmas Magic on App □. It was Christmas time! And how could I resist all the magic and beautiful decorations from the holidays? What if we could bring a little bit more life into our splash screen? What if we had the power to change the animation whenever we wanted? The Beginning of a Dream Later, we created a second version of the Splash, which we improved with a pulsing logo, it brought a much bigger appeal to the users and it was way nicer to watch. It's the first thing any user will see when they open your app (and we all know that the first impression is really important).įor a very long time, our app had just a plain boring splash with a static image (with veeeeeeery little movement). Splash screens are the windows to the app's souls. Creating an animated Splash Screen for your iOS app using Lottie ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |