After Effects Animations | Lottie in IOS

Resources:

• IOS documentation for Lottie: Airbnb Lottie Documentation
• A good resource for finding lottie animations and testing/saving your files: Lottie Files
  • Preview files here
  • Find animations here

Steps

In order to create an animation in an IOS project using Lottie you need to first have an After Effects animation file. Create a simple AE text animation with opacity and two keyframes. One with 0% opacity at the biggining and one with 100% opacity at the end. When that is complete go to Window->Extensions->Bodymovin. When the popup window appears, you will want to specify the destination folder of your animation json files. Make sure to click the “selected” radio button and then click “Render”. This will output a json file in the directory you specified. After that, put your json file in your ios project and it is ready to be refenced in code.

Your AE Animation

Your Animation

SWIFT Code for Animation

Create an view in your view controller and link the IBOutlet

@IBOutlet weak var lottieView: UIView!

Next create an animation view

let animationView = AnimationView()

From there you are now able to call the animation code using the following as a guide. “logo-data” is the name of the json file output by After Effects

animationView.animation = Animation.named("logo-data")
animationView.frame.size = lottieView.frame.size
animationView.contentMode = .scaleAspectFill
    
lottieView.addSubview(animationView)

animationView.play { (finished) in
    \\ADD COMPLETION CODE HERE
}