Before moving on to how to load Lottie animations remotely, let's first understand what Lottie animations are and how they are useful in different scenarios.
As per the official documentation, A Lottie is a JSON-based animation file format. Since these are JSON-based they can easily scale up or down, without being pixelated or hampering the quality of the animation, also can interact with these animations using code and can manipulate them as well, which makes them of real importance when it comes to dealing with animations. They can be used across clients be it web, android, or iOS.
How to work with Lottie animations on iOS?
In order to render the Lottie animations natively, we are going to use a pod named Lottie-ios that parses the JSON animation and renders it on the screen. I will be using cocoapods, but you can you Swift package manager(SPM) or Carthage based on what you are comfortable with.
In order to install the pod, please paste the below snippet inside Podfile and run pod install
pod 'lottie-ios'I will be using this URL for the Lottie animation, there are a lot of free-to-use public Lottie animations available, you can see more here and feel free to use whatever suits you.
Let's create a new Xcode project and Install the Lottie to get started.
This is how the pod file looks
1. Import Lottie
Before using we will be importing the Lottie pod we just installed in order to use animations using swift.
2. Create an Animation view that will hold the animation for us
This is the view that will hold the Lottie animation for us, this view is like UIView which has animation handling properties added by the library we are using. This view/class can handle a lot more things like playing animations, animation speed, background, transition, etc.
3. Adding Lottie from the URL and adding it to the animation view we just created.
We will use the Animation class to load the animation and inject it into the animation view, this piece of code simply provides the URL and in return, it gets an animation that is of type Animation , which we will assign to the view using its animation property. This class automatically handles everything for us be it downloading the JSON file and parsing the animations, we just have to provide it with the URL. After setting up the animation , we have also specified certain properties to be taken care of.
3. Adding Lottie to the view and setting up constraints
After we have set up all the views correctly, we will add the animation view to the main view and set up constraints. And hit the build button.
If you have followed all along , you will have something like this on the screen. Isn’t it beautiful.
Thank you so much for giving it a read. If you have any questions or doubts happy to help. via LinkedIn. Also, you can find the Github repo to code along ❤️.
