July 31, 2020

Lottie animation in iOS app

By Mohit Agrawal

Let’s see what is Lottie animation and how to use it in iOS app?

Introduction

Hey coders 👋 , in this article I will show you the easiest way of using awesome animations in your iOS app. We will explore and see how to implement Lottie animation in your iOS app.

What is Lottie animation?

Lottie is a tool that generates the JSON based animation file which can be easily imported to iOS, android, flutter, and web apps without any pixel distortion. You can read more about it here.

What will we will build ?

Let me show you guys first that what we are going to build in this tutorial. I will use this Lottie animation file, you are free to use any.

lottie animation ios 9
Lottie animation in iOS

Implementation

Put on your seat belt and get ready because here is your favorite part, coding !!!🤩.

I will show you the best approach for integrating Lottie animation into your iOS app.

1. Installation of Lottie in the iOS project

There are many ways of installing Lottie in the iOS app, but I recommend you to go with CocoaPods. It is easy to manage.

Create a new iOS project and name it “Lottie anim”. Close the project. Now open your project root location in the terminal. Add hit pod init.

lottie animation ios 2
Run pod init

The above command will create a new pod file in your project folder.

lottie ios animation 3
Open podfile

Open this Podfile and add this pod 'lottie-ios' as shown in the below image.

lottie animation ios 4
Add lottie pod

Now save the podfile and come back to your terminal. Run pod install to install the Lottie framework in your iOS app.

After the successful installation, you will see that your project structure has been changed a little. A new workspace will appear in your project folder.

lottie animation ios 5

Note: Now onwards you have to use the new workspace only to open your project.

Now Click on the newly created workspace and open your project.

2. Add Lottie animation file

We have now the Lottie in our project, so open you ViewController.swift and do import Lottie at the top. Build your project to check the successful installation of Lottie.

Download this animation file and add it to your project as shown in the below image. Make sure you are adding the file to the proper target.

lottie animation ios 6
Add Lottie JSON file

It should look like this after adding the Lottie JSON file in you project.

lottie animation ios 7
Lottie JSON file

3 Lottie animation without storyboard

Open the ViewController.swift and let’s write some code now. We will make a method func setAnimationView() {} and call the same in viewDidLoad().

private func setAnimationView() {
        // Init for animation view
        animationView = .init(name: "astronaut")
        // Enabling auto layout constraint
        animationView!.translatesAutoresizingMaskIntoConstraints = false
        animationView!.frame = view.bounds
        //Set animation content mode
        animationView!.contentMode = .scaleAspectFit
        //Set animation loop mode
        animationView!.loopMode = .loop
        view.addSubview(animationView!)
        animationView!.play()
    }

animationView = .init(name: "astronaut") is used to initialize the animation view. It takes the name of the JSON file as the parameter.

animationView!.loopMode = .loop , this will play the animation in the loop. I recommend you to play with the different options available.

Here is the complete source code for ViewController.swift.

import UIKit
import Lottie

class ViewController: UIViewController {
    var animationView: AnimationView?
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setAnimationView()
    }
    
    private func setAnimationView() {
        // Init for animation view
        animationView = .init(name: "astronaut")
        // Enabling auto layout constraint
        animationView!.translatesAutoresizingMaskIntoConstraints = false
        animationView!.frame = view.bounds
        //Set animation content mode
        animationView!.contentMode = .scaleAspectFit
        //Set animation loop mode
        animationView!.loopMode = .loop
        view.addSubview(animationView!)
        animationView!.play()
    }

}

Run your code and you should be able to see the expected outcome. Please let me know if you are facing any issue in the comment section.

Similar post: Lottie animation as progress bar in iOS

Frequently asked questions on Lottie animation.

  1. Lottie animation is not coming proper in iOS

    Sometimes iOS doesn’t support all the Lottie features. It may happen that the same Lottie JSON file is showing different behavior in the iOS app and android app.
    To should always test the JSON file in the Lottie test app before implementing it in your project.
    lottie animation ios 9

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!