Lottie Animation in Swift

In this blog, we are going to learn about Lottie animation in Swift. Animation plays a very important role in providing a better user interface experience in your iOS app. A Lottie is an animation file that you can download in various formats and can use in your iOS project.

In this blog, we are going to learn about the integration of the Lottie Animation in Swift. Please follow the steps mention below.

STEPS TO INTEGRATE

STEP – 1

Create a project in Xcode and name it as per your preference.

STEP – 2

Create a pod file and install the Lottie pods.

pod 'lottie-ios'

1	pod 'lottie-ios'

STEP – 3

Now download a Lottie animation file in JSON format from here and add it to your project.

STEP – 4

Create a view controller and add the code mentioned below.

import Lottie

1	import Lottie

STEP – 5

Now add an animation view in your view controller.

private var lottieAnimation: AnimationView?
private var backLottieAnimation: AnimationView?

1 2	private var lottieAnimation: AnimationView? private var backLottieAnimation: AnimationView?

STEP – 6

Add the file JSON file downloaded to the animation views.

// background Lottie Animation

self.backLottieAnimation = AnimationView(name: "cautionWetPaint")
self.backLottieAnimation?.frame = self.view.bounds
self.backLottieAnimation?.contentMode = .scaleToFill
self.backLottieAnimation?.center = self.view.center
self.backLottieAnimation?.loopMode = .playOnce
self.view.addSubview(self.backLottieAnimation!)

// background Lottie Animation

self.backLottieAnimation = AnimationView(name: "cautionWetPaint")

self.backLottieAnimation?.frame = self.view.bounds

self.backLottieAnimation?.contentMode = .scaleToFill

self.backLottieAnimation?.center = self.view.center

self.backLottieAnimation?.loopMode = .playOnce

self.view.addSubview(self.backLottieAnimation!)

playAnimation()


// Top Lottie Animation

self.lottieAnimation = AnimationView(name: "bloodtransfusion")
self.lottieAnimation?.frame = view.bounds
self.lottieAnimation?.contentMode = .scaleAspectFill
self.lottieAnimation?.frame = CGRect(x: 0, y: 0, width: 200, height: 300)
self.lottieAnimation?.center = self.view.center
self.view.addSubview(self.lottieAnimation!)
self.lottieAnimation?.loopMode = .loop
self.lottieAnimation?.play()

playAnimation()

// Top Lottie Animation

self.lottieAnimation = AnimationView(name: "bloodtransfusion")

self.lottieAnimation?.frame = view.bounds

self.lottieAnimation?.contentMode = .scaleAspectFill

self.lottieAnimation?.frame = CGRect(x: 0, y: 0, width: 200, height: 300)

self.lottieAnimation?.center = self.view.center

self.view.addSubview(self.lottieAnimation!)

self.lottieAnimation?.loopMode = .loop

self.lottieAnimation?.play()

STEP – 7

Create a function and use the completion of the play. So, we can perform other stuff after the completion of the animation.

func playAnimation() {
    self.backLottieAnimation?.play(completion: { played in
        if played == true {
            print("Navigate here")
        }else {
            self.playAnimation()
        }
    })
}

func playAnimation() {

self.backLottieAnimation?.play(completion: { played in

if played == true {

print("Navigate here")

}else {

self.playAnimation()

}

})

}

Animation in action

CONCLUSION

We have successfully integrated Lottie Animation into our iOS project. Please refer to my other blogs from here.

Lottie Animation swift

Vipin Kumar

31 Oct, 2021
Created by - Vipin Kumar

. . .