Add Your Very First Lottie Animation in iOS
How to edit layer colors, apply rotation, and handle background behavior
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, and allows native apps to use animations as easily as they use static assets.
In this article, I will show you how to add a Lottie animation to your iOS Application. Additionally, I will demonstrate how to edit layer colors of Lottie animation. Also, you will see how to rotate them in a UIView. Last but not least, I will show you how to handle animation behavior when your app goes background.
In PlusMinusOne, we develop, maintain, and deploy many iOS applications. One of these applications needed a scanning animation while taking a photo. We thought that would be a good occasion to use Lottie, which has been used by the community for a long time, for such relatively simple animation.
As you may notice, Lottie Files is a preferable resource by the community to create, edit, test, and display Lottie animations. So, Let’s start!
Edit & Download Lottie Animation
- Choose the animation.
2. Edit layer colors: Select Animation → Scroll Down → Choose Edit Layer Color.
This is how it looks after I customized it.
3. Select “EXPORT AS A LOTTIE JSON” to download customized animation.
Implementation
You can install the Lottie framework by following the instructions here. We use CocoaPods in our projects.
- Add animation’s .json file to your Xcode project.
- Go to Storyboard and select the controller where you want to add this animation.
- Add a
UIViewto the controller and update Identity Inspector as follows:
4. Connect AnimationView to IBOutlet:
5. Configure animation in viewDidLoad:
Line 1. Rotates scanAnimationView 90 degrees to play left to the right direction
Line 2. Sets the content mode to ScaleAspectFill. scan animation will be placed in a resizable frame, so it should fill its superview.
Line 3. Sets the loop behavior for play calls. Loop behavior plays the animation in a loop from beginning to end until stopped.
Line 4. Background behavior describes the behavior of an animation view when the app is moved to the background. PauseAndRestore pauses the animation and restart it when the application moves to the foreground.
Line 5. Plays the animation from its current state to the end.
Result
To learn more about our development experiences you can look at our medium page. At Plus Minus One, we love to learn and share our experiences. We hope this article makes your life easier 🙏🏻
