Lottie Animation on iOS

With the release of Lottie, incorporating animations into iOS has been made very simple. In this piece we will talking about how the beautiful animations can be added with just a few simple steps.

What we are trying to achieve?

Installation (Using Pods)

As of 3.0 Lottie has been completely rewritten in Swift! Although the official Objective-C branch still exist but we decided to have a wrapper class to use the latest Lottie version.

In the wrapper class, we have exposed a few helper methods that can be used from within the Objective-C classes for load/start/stop/loop of the animation and many more. Here is a gist of it

Let’s talk about each method in some details.

init(frame: CGRect): This is the init method, it expects a frame as a parameter in which the animation will be played, and returns an object of the class AnimationView.

loadAnimation(name animationName:String): This method takes in the name of the Lottie json file, loads it from the bundle path, decodes and assigns it to the Animation property of the AnimationView object

play(completion: LottieCompletionBlock? = nil): This method is for playing the animation in a linear manner (starting from first frame). This method also provides a completion block of type LottieCompletionBlock = (Bool) -> Void.

pause(): Pauses the animation on its current frame. So if we pause and play again, the play method will play the animation from the frame it was stopped at.

stop(): Stops the animation and resets the frame to 0. So if we stop and play again, the play method will play the animation from frame 0.

And that’s it, we have the basic functionality now to make any animations runs with just a few lines of code.

Now as we progressed, we realised that we do need to have some control over the frames. Plus we need to have more flexibility in modifying the JSON as per our needs, without the design team providing us with multiple JSON files just for the sake of having different colours (for example).

Animation Frames:

Frames can easily be segregated using LottieFiles. We can exactly know on which frame a transition is happening (if any), or how many frames we need to repeat before reaching the end of the animation.
Let’s look at the helper method we wrote achieving this behaviour:

Dynamic Properties:

Dynamic properties allows us to target specific animation properties and update them at runtime in response to an event, for example a button click, a success or error state or a download completed event. This sounds pretty cool, but how does it actually work? In After Effects (AE) where the animation is built, it has a hierarchy of animation properties which is called the animation’s composition. Okay now, how can we find out what the animation hierarchy looks like?

Discover the KeyPath:

By running the resolveKeyPath() method on the animation view we target all the layers using the a Globstar “**” and print each layer in the logcat.

And below is the result! ⬇️

This is not the whole composition, it goes on and on… But what we can see here is how each animation layer makes up the data structure of the animation. Time to start updating them at runtime!

Let’s write a helper method which takes in the keyPath string and updates the colour.

Let’s go ahead and use it!

And that’s it. You can now alter any animation hierarchies as per your requirements. It might take a few trial and errors to reach exactly the layers you need to modify from the hierarchy, but once you get a hold of it, it’s very much straightforward after that.

NOTE: You can target several layers (as shown above), or a specific layer or target all the layers using Globstars (“**”) depending on your needs.

The Final Result

Looks sweet, right? I’ve also done a short video below to introduce any readers to using Lottie for apps. Take a look!