[iOS] Incorporate Lottie to make amazing Animation in Xcode project

Lottie is a great way to lighten up your app. It’s aesthetic and functional. Plus, it’s really easy to add to your project. While a lot of animation on Lottie cost real money to download, there are still tons of free animation for us to choose from. You can even design your own animation and post it on Lottie to make money. So, without further ado..

First

Go to Command Line and direct to your project. We can do this by a simple click-and-drop.

Then

Follow all the steps on the official Lottie Github site.

airbnb/lottie-ios

After installation, go ahead and open .xcworkspace file. And you are all set!

Find your desired animation on Lottie and download its Lottie JSON file.

Once the download completed, click and drop the JSON file to your Xcode project.

Now let’s take a look at the code.

(Remember to import Lottie in the ViewControllers)

private let animationView = AnimationView()
//MARK: - Lottie Animation
func popupAnimation() {
let anima = Animation.named("31176-medal-badge")
animationView.animation = anima
animationView.backgroundColor = .clear
animationView.contentMode = .scaleAspectFill
animationView.frame = view.bounds
animationView.frame = CGRect(x: 100, y: 50, width: 200, height: 200)
view.addSubview(animationView)
//animationView.play(toProgress: 1, loopMode: .loop)
animationView.play()
}

The hardest parts right here are probably typing the right file name and adjusting the animation XY coordinates. (There are a lot of parameters for us to alter the animation, including pausing, looping, etc. But, this is basically what we will do for now.)

And it will look somewhat like this…