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.
|
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.
|
1 |
import Lottie |
STEP – 5
Now add an animation view in your view controller.
|
1 2 |
private var lottieAnimation: AnimationView? private var backLottieAnimation: AnimationView? |
STEP – 6
Add the file JSON file downloaded to the animation views.
|
1 2 3 4 5 6 7 8 |
// 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!) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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.
|
1 2 3 4 5 6 7 8 9 |
func playAnimation() { self.backLottieAnimation?.play(completion: { played in if played == true { print("Navigate here") }else { self.playAnimation() } }) } |
CONCLUSION
We have successfully integrated Lottie Animation into our iOS project. Please refer to my other blogs from here.