Easily add a Lottie animation into your IOS project.

DataSeries highlight

• 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. — The official guide to Lottie.

First things first

What is a “Lottie Animation” ? These are the words from the ones who created it, in 2017.

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. — The official guide to Lottie.

Before starting our Demo, please consider checking their website to check some of the great animations their community created, i used some of them in almost every project i did this whole year.

Demo : Add Lottie animation to your project

Getting resources:

The first thing to do is to download one the animations (check them in the link above), and make sure you download it in JSON format. For example, i dowloaded this “Loading” animation.

Lottie Animations : lottiefiles.com/featured

ANNRAY YANG — Lottiefiles

Now let’s add the Lottie package from Github into our project (File — > Swift package — >Add package dependency) Please use link below as demonstrated in pictures.

Link : github.com/airbnb/lottie-ios

Add Lottie package — Pic1

Add Lottie package — Pic2

Click Next, once the package is added to your project we need to fix a minor compatibility error (Hoping Apple will fix it soon). Click on your project file, select Target section and search for “dead code” then switch it to No, if it s not already switched. PS: if you can’t find “dead code” make sure you are selecting “All” in “Signing & Capabilities” tab.

Dead code fix — Pic1

Dead code fix — Pic2

It’s coding time !

create a new SwiftUI file by combining the ⌘+N shortcut, let’s name it LottieView. Xcode will automatically create a SwiftUI View, but we need a UIViewRepresentable type of struct. So, let’s delete all the code and rewrite it ourselves by creating a the new struct.

import SwiftUI
struct LottieView: UIViewRepresentable{
}

The compiler will show the protocol error, let it fix the error for us. It will add the typealias UIViewType. Now, we will add the type which is UIView, Press ⌘+B to build and again the compiler will pop an error message to asking us to conform the protocol, let it fix the error again, and Voila !

import SwiftUI
struct LottieView: UIViewRepresentable{
typealias UIViewType = UIView
func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
<#code#>
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
<#code#>
}
}

We will use the recently created “makeUIView” function to create an empty view, import the Lottie animation (named “loading”) into an empty animation then add it to the empty view we just created. PLEASE don’t forget to import Lottie.

import SwiftUI
import Lottie
struct LottieView: UIViewRepresentable {
typealias UIViewType = UIView
func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView{
let view = UIView(frame: .zero) // Empty View

let animationView = AnimationView() // Empty animation
let animation = Animation.named("loading") //Import Lottie Animation
animationView.animation = animation // Set the Animation to the View
animationView.contentMode = .scaleAspectFit // Scale it
animationView.play() // Play !

return view
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
}
}

One more step to do, we need to set our constraints, i usually set it through SwiftUI tools ( padding, margins, stacks ..) but this time we will do it the old fashion way.

import SwiftUI
import Lottie
struct LottieView: UIViewRepresentable {
typealias UIViewType = UIView
func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView{
let view = UIView(frame: .zero) // Empty View
let animationView = AnimationView() // Empty animation
let animation = Animation.named("loading") //Import Lottie Animation
animationView.animation = animation // Set the Animation to the View
animationView.contentMode = .scaleAspectFit // Scale it
animationView.play() // Play !
//SET THE CONST !
animationView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(animationView)
NSLayoutConstraint.activate([
animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
])

return view
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
}
}

We finished 1/2 files, in order to implement our View, let’s create a new SwiftUI view as usual ⌘+N shortcut and selecting swiftui file, call it Loading. Delete the default Text() line and type

LottieView() // The Lottie Animation

To make things better, let’s put it into 200/200 frame and embed it in a Vertical Stack so we ll have our second file.

import SwiftUI
struct LoadingView: View {
var body: some View {
VStack {
    LottieView() // // The Lottie Animation
.frame(width: 200, height: 200)
}
}
}

In order to see our animation, go to ContentView and put the LoadingView(), then press ⌘+R to run the project.

import SwiftUI
struct ContentView: View {
var body: some View {
    LoadingView() 
}
}

Final result

About the author : Ghazi Tozri student at FS Monastir university, president of free software club Monastir and junior mobile developer.