Using Lottie Animations
A step-by-step tutorial to adding animations to your Swift app
With the release of Lottie, Airbnb has made it so simple to incorporate animations into your Swift projects. In this piece, I will show you step-by-step how you can add beautiful animations into your next application.
First things first, we will need to import Lottie. We can do this through the terminal; if you haven’t set Pods up yet do so by typing the following command:
Once that command finishes, you can open up the Podfile using Vim or using TextEdit. Once it is open, copy the following code into your Podfile:
After you finish saving the Podfile, install the Lottie framework with the following command:
Now we are ready to use Lottie in our application. From this point forward, when you open your app, you will need to open up the
Let’s start setting up our storyboard in Xcode.
- Drag a view to the canvas.
- Type in
AnimationViewfor the custom class of the view.
- Control-drag the view to the
ViewControllerfile and make an IBOutlet connection and call it
Now you can either use an existing animation from https://lottiefiles.com (which I will be using for this piece) or you can make your own using After Effects. Once you find your desired animation, download it and drag the JSON file into your project from the finder. We will now need to navigate to our
ViewController file and import
Lottie at the top of the file. In the
ViewDidLoad() you will want to enter the following code:
In the code above, we are essentially making a reference to our Lottie JSON file and setting its content mode to whatever we desire. From there, it adds the animation as a subview to our view that we created in the storyboard, then we set its loop mode to either continually loop the animation or play it only once. Now you can run your application and see your Lottie animation come alive!