If you're here, there's a 99.999% chance you know what Lottie is. For those still confused, Lottie is an awesome iOS, Android, and React Native library created by Airbnb that renders After Effects animations in real-time, allowing you to use animations as easily as you use static images.
You can find more info on their website and all the technical documentation you want on their github page.
Overview
In this tutorial, we’ll create a simple SwiftUI view using [.c-inline-code]UIViewRepresentable[.c-inline-code] in order to create and load any Lottie animation into your project.
Let's get started
Installation
In order to use Lottie inside your project, we need to install the library. For this, we have a few different options like Cocapods, Carthage, or the one we will use in this tutorial Swift Package Manager.
First of all, on Xcode click on [.c-inline-code]File[.c-inline-code] and then select the [.c-inline-code]Add Package Dependency...[.c-inline-code] option in Swift Packages. In the input box, enter: [.c-inline-code]https://github.com/airbnb/lottie-ios.git[.c-inline-code] (this is the library repository from where Xcode will download the code), hit next, and leave the major version that is selected by default to use the latest Lottie release.
Hosting Lottie on SwiftUI
Now that you have Lottie already installed in your project, we can start creating the view. For this, you'll need to create a new Swift file. Call it [.c-inline-code]LottieView[.c-inline-code], add the [.c-inline-code]import SwiftUI[.c-inline-code] statement on top and then the following:
CODE: https://gist.github.com/pMalvasio/93a02c5fb8d2f35509d78df8571915cd.js
So far we're using a [.c-inline-code]UIViewRepresentable[.c-inline-code] to allocate an empty [.c-inline-code]UIView[.c-inline-code] with frame [.c-inline-code].zero[.c-inline-code].
Loading the Animation
Next, you need to import Lottie on your code. Add [.c-inline-code]import Lottie[.c-inline-code] below the SwiftUI import that's already there. In the [.c-inline-code]makeUIView(...)[.c-inline-code] method you can now call Lottie to load the animation and add it to the view we already created.
CODE: https://gist.github.com/pMalvasio/82ec0abbdcf9b1776a533e673e8f6533.js
Adding the constraints
To ensure that it takes the full height and width of the container, we'll specify constraints. To do so, add the following before returning the view:
CODE: https://gist.github.com/pMalvasio/06844e05841cc42cc26797e9e6d38ff1.js
Almost there
The last part will be to allow the [.c-inline-code]LottieView[.c-inline-code] to load any animation you import into your project. To do it we can add a new var and pass it at the moment of calling the animation inside the [.c-inline-code]makeUIView(...)[.c-inline-code] method:
Add [.c-inline-code]var filename: String[.c-inline-code] below the [.c-inline-code]typealias[.c-inline-code] line and use it to call the animation replacing the current call for: [.c-inline-code]let animation = Animation.named(filename)[.c-inline-code]
Ready to go
Done. You successfully created a [.c-inline-code]LottieView[.c-inline-code] with SwiftUI that can load any animation you want into your project and start playing it. Now you only need to call [.c-inline-code]LottieView(filename: YOUR_ANIMATION)[.c-inline-code] and you will see it.
This is the final result:
CODE: https://gist.github.com/pMalvasio/73184eb5142139cad9a92a7752fb2752.js
Tons of animations
Usually, these animations are provided by a designer, but if you wanna dive into tons of animations that are already there for you to use you can visit LottieFiles. Most of them are free, but, if you want to contribute with that huge community of designers, you can also buy some animations to support them.
