Stunning Animation effects in iOS Apps [Lottie]

Make your app with wonderful animated effects to make your app live!

Hola! There are a bunch of animation libraries that are already provided. What we only have to do is to find the best animation that suits our app and to use it!

One of the animation libraries that i used is Lottie. Lottie is a mobile library for Android and iOS that natively renders vector based animations and art in real time with minimal code.

source: https://github.com/airbnb/lottie-ios

How to use Lottie for iOS?

Installing Lottie

For CocoaPods 👇🏻 refer to the steps below, and for Carthage or SPM click here to see more details on installing Lottie.

1️⃣ Add the pod to your Podfile

pod 'lottie-ios'

2️⃣ and then run

pod install

3️⃣ when you finally see these files, open your project with .xcworkspace

Use it in real coding

1️⃣ go to lottie files to search and download the animation

2️⃣ download it as JSON file

3️⃣ open your xcode, and add a file to your workspace.

4️⃣ import Lottie and create animationView

import UIKit
import CoreData
import Lottie
class TodoViewController: UIViewController {
     let animationView = AnimationView()
     override func viewDidLoad() {
          super.viewDidLoad()
     }
}

5️⃣ create method

func setupAnimation(){
     animationView.animation = Animation.named("32585-fireworks-display")
     animationView.frame = view.bounds
     animationView.backgroundColor = .clear
     animationView.contentMode = .scaleAspectFit
     //animationView.loopMode = .loop
     animationView.isUserInteractionEnabled = false
     animationView.frame = CGRect(x: 50, y: 80, width: 150, height: 150)
     view.addSubview(animationView)
     animationView.play()
}

❗️ animationView.animation = Animation.name(“JSON file name”): the JSON filename downloaded from lottie.

❗️animationView.loopMode = .loop : it will play the animation continuously.

❗️ animationView.isUserInterationEnabled = false: the default is true, which means when there’s animation, we won’t be able to get users interaction. To avoid this, set animation’s userInteractionEnabled to false to get userInteraction from another View.

❗️ animationView.frame = CGRect(x:,y:,width:,height:): set up the location of the animation will appear.

❗️ view.addSubview(animationView): add animationView as subView

❗️ animationView.play: play() animation.

// Play the animation
animationView.play()

// Stop the animation
animationView.stop()

// Pause the animation
animationView.pause()

[option]❗ animationView.animationSpeed = 2.0 : to make the animation speed slow or fast.

6️⃣ Don’t forget to call method

setupAnimation()

Then you’ll see cute simple animation on your app! Thanks for reading

References :

LottieFiles - Free animation files built for Lottie

airbnb/lottie-ios