7/4/2023 0 Comments Loading screen gif![]() loading.css contains 50+ seamless looping animations along with 7 simple spinner with pure css, and is quite handy when you want some simple appealing animation. I highly recommend reading Apple Human Interface Guidelines before deciding to use this approach. We also provide a set of css loading animations loading.css for animating images directly in your website. ![]() One thing to note is that Apple recommends against using complex animations in launch screen. In this blog post, we’ve gone through the process of creating an animated launch screen using a GIF. It allows us to load GIFs using a UIImageView and also to control when to start and end the GIF animation.Ĭlass LogoAnimationView : UIView It is a high performance and easy to use GIF engine. For loading the GIF in the app we’ll use a library called SwiftyGif. To import the GIF we have to drag and drop the image in the project since importing in the Assets folder is not supported. We’ll use a custom UIView subclass that will replicate the root view of the launch screen, but instead of loading a JPEG image we’ll load the logo GIF. After these changes the launch screen will look like this: We’ll also have to update the background color of the root view to match the background color of the image. We’ll add a UIImageView with the logo in my LaunchScreen.storyboard file and add center, width and height constraints to it. The first frame in my example will look like this: To extract the first frame we can open the GIF in the Preview app and export the first frame as a JPEG image or use tools like GIMP. In this example we’ll use the following GIF: This way, when the app launches the user will get the impression that the launch screen is animating. When the app launches add a view in the root view controller that loads the animated GIF at the same spot that we’ve put the static image in the launch screen.Add the first frame of the GIF as a static image in the launch screen.In order to implement the logo animation we’ll need to do two things: At the end we’ll get the following result: The source code for this project is available on GitHub. In this blog post, I will explain the implementation in more detail. I answered the question with a brief explanation on how it could be implemented and how the user could get the impression that the launch screen is animating. a simple loading screen that contains an animated GIF with a progress bar. There was a question on a Slack channel for iOS developers on how to implement an animated launch screen using a GIF image since Apple doesn’t allow GIF images in launch screens. The level selection screen Right now, we only have a couple of levels showing. ![]() Animated launch screen using a GIF in iOS
0 Comments
Leave a Reply. |