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”

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

pod init

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

target 'AnimationUsingLottie' do

  use_frameworks!
   pod 'lottie-ios'

end

After changes save Podfile and install pod by

pod install

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

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 ⌥ + ; )

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 !!

Step 3 : Show Simple Animation

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

startPinAnimation

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

import Lottie

in class file.
Create an object of

LOTAnimationView

class

var animationView = LOTAnimationView()

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

play()

method of animation view object to start animation

func animatePin() {
     animationView = LOTAnimationView.animationNamed("PinJump")
     animationView.frame.size = CGSize(width: 340, height: 340)
     animationView.center = self.view.center
     self.view.addSubview(animationView)
     animationView.play()
}

Lottie provides two

play()

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

play()

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

animationView.play { (success : Bool) in
   // Any stuff to do after animation
}

Call

animatePin()

method from “Show Animation” button action and run app

@IBAction func startPinAnimation(_ sender: UIButton) {
   animatePin()
}

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

loopAnimation

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

animatePin()

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 :

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

We can also do stuff like speed changes using

animationSpeed

property and pause animation using

pause()

method.