Animation Using Lottie in iOS

Animation is a very powerful tool for communication, It make user experience richer than ever and draw attention of user toward specific thing.

But creating animation in app is not easy and fun as it looks. Developer either need to write bulky hard to manage code or add so many images for different screen sizes which makes app big in size. Due to this reason most apps don’t use animations.

Airbnb provides an open source library called Lottie to implement animations in app easily. Lottie Library renders After Effects animations in real time and allow app to use animation easy as using static images. This animations can be paused, looped, resized, sped up and slowed down.

Let me help you implement this.

Step 1 : Setup Project with Pods

First of all we’ll create a “Single View Application”
lottie-img1

lottie-img2

To use Lottie Library we have to install CocoaPods, If you are not familiar with CocoaPods, Please visit this site for detailed information : https://cocoapods.org/
In terminal first move to project directory and then by using

command project will be initialized with pod
After pod is successfully initialized, we have to update Podfile
Update Podfile as below:

lottie-img3

After changes save Podfile and install pod by

command in terminal
Once pods are successfully installed, project will have workspace file and from now onwards we will use workspace file to work with project
lottie-img4

Step 2 : Create JSON File of Animation

As we are rendering Adobe After Effects animations, we must have one animation file created in After Effects (you can get sample files from Lottie sample app)
To create JSON file from After Effects we must enable “Allow Scripts to Write Files and Access Network” from Preference -> General (shortcut : command ⌘ + option ⌥ + ; )
lottie-img5

Now we can easily create JSON file from Windows menu -> Extentions -> Bodymovin
In appeared screen, select composition (animation) and Destination Folder (where you want to export json file) then select Render button and we are Done !!
lottie-img6

Step 3 : Show Simple Animation

Open project workspace file, Add one button on Storyboard and create IBAction named

for same. On tap of this button we will display animation.
Our basic setup is ready and we can move to adding animation and for that first we need to

in class file.
Create an object of

class

To initialize animation view object animation file name is required (generated from Adobe After Effects) and file must have .json extention
Create a method to initialize animation view object with frame and animation name then add it in ViewController
We have to call

method of animation view object to start animation

Lottie provides two

methods one as we used in above example but we can also use

method with completion block if we want to do something after animation

Call

method from “Show Animation” button action and run app

lottie-img7

With only few lines of code we have successfully added animation in our app, but it stops after one iteration to prevent this we can enable looping by using

property

Step 4 : Enable Looping in Animation

Add another button in storyboard (set hidden property true), on tap of this button we will toggle looping
We have to update

method by passing looping status
I have updated code with above changes and minor other changes like update button title as per looping status, so final code will look like this :
lottie-img8

Finally our code is ready, now run app and enjoy animation.
lottie-img9

We can also do stuff like speed changes using

property and pause animation using

method.

mm

Mahavir Sinh Gohil iOS Developer

I am Mahavirsinh Gohil, iOS Developer at Yudiz Solutions Pvt. Ltd. I am a tech enthusiast and very passionate about making beautiful, user friendly, easy to use and at the same time functionally powerful iOS apps. I spend my free time in knowing about whats new in technology as we are in rapidly growing industry where we need to keep ourself up to date.

Comments are closed.

Top