Hey folks! Today, we will talk about how to add Lottie animations to an iOS app. Recently I needed to add animation to an application and frankly, I had a bit of a hard time at first. I also wanted to show practically how I added it. Because I think it is difficult.
Before starting, let’s talk about Third-Party Libraries, what they are, and how to use them using something called CocoaPods.
Let’s say we are writing an article and this article is about bats. If I’m not a zoologist, where can I get enough information to write an article on bats? I can go to the library, that’s right. So to write this article I need help from something. And when it comes to apps, we use other people-created third-party libraries to help us and streamline our coding. We’re able to leverage these third-party libraries of code that contain individual modules for specific purposes. For example, an animation library that helps you animate the components of your app.
Now, what are CocoaPods?
CocoaPods is the tool that we’re going to be using to search for and incorporate some third-party libraries into our project.
We can reach it from the link above.
Besides these, the last thing we need to mention is what Lottie Files are. I’ll use the description on Lottie’s own site to explain this.
A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.
CocoaPods Installation
Now we will install CocoaPods on our Mac using the terminal.
We will do this in two stages. If you go to the Getting Started section of CocoaPods, as you will see there, we need to write the following on the terminal:
$sudo gem install cocoapodsWhen we type this into the terminal, the terminal will ask us for a password. After entering our password, we will wait for the installation to complete. If we didn’t get any errors and the installation was successful, we should see something like this on the screen:
If you are installing it for the first time, this screen will look a little different for you, probably…
So, now that we’ve installed CocoaPods then we’re ready to proceed on to the next step. And step two involves the command pod setup.
$pod setup --verboseIt’s going to pull down what’s called the master repository from CocoaPods which lists all of the available CocoaPods. That completes the setup.
Let’s do a little check and see if everything is alright.
$pod --versionSo we should see a version like this:
It means that you’ve got CocoaPods successfully installed and set up. So what do we do after all this? Now it’s time to choose an animation and add it to the application.
Adding Lottie Animations to the iOS app
I selected animation from Lottie’s site and downloaded it in JSON format. Now let’s take a look at how to work with a pod file and how to create a .xcworkspace project with CocoaPod.
By the way, if we don’t have a project, the first step is to create it… (joke)
Using the terminal, we go to the directory where the project is.
It’s here that we want to run the command “pod init.” And what this will do is it will initialize a new pod file.
We can see the pod file created inside the project folder. Now we will open this pod file using Xcode because we need to make some changes to it.
The platform allows you to define the minimum iOS version that you want your app to support. So in this case, it’s saying the iOS platform 9.0 or above. Suitable. We can also see that I have added the name of my app as a target. The important part for us is the ‘pods for LottieTutorial’ part. Here we define the Lottie library to import into our application. All right, we’re done here. We can save and exit. Now we go back to the terminal and run the following command.
$pod installThis is going to go and fetch the pod file from CocoaPods and install it into our project. We close any current Xcode sessions and use the file: LottieTutorial.xcworkspace for this project from now on.
If we look in the project directory, we can see the newly added files there as well. Anyway, now we open the project.
Now we will go to viewController and import lottie.
It seems everything is fine. After that, we drag and drop the JSON file that we have downloaded and write a few lines of code. (We’ve come to my favorite part.)
First, we need to create an animationView. Then we will do some operations inside viewDidLoad().
You can find the same code on Lottie’s website. Let’s see how it looks.
It looks sweet. You can find the code of the project is here.
Anyway, that’s all I have to say. Happy coding!
