Getting Started with Lottie Animations in iOS

What is Lottie? Lottie is an open source animation library developed by Airbnb that natively renders vector based animations and art in realtime.

Lottie supports and renders animation exported in bodymovin JSON format . There are few ways for designers to generate a bodymovin JSON file:

1. After Effects with  bodymovin
2. Sketch with  Lottie Sketch Export
3. Haiku

By using Lottie, designers can create and ship beautiful animations without the need of developers recreating it by hand. This can definitely improve the collaboration between designers and developers.

Before we get started, here are a few sample animations to get you excited.

Lottie animations (source: https://github.com/airbnb/lottie-ios )

Look exciting? Read on to find out how you can start using it in your iOS app.

Lottie for iOS Installation

Based on the Lottie Github page , you can install the library using CocoaPods, Carthage or Swift Package Manager (SPM). I will only cover installation using SPM in this article. However, feel free to use any other installation method that you preferred.

To install using SPM, go to File → Swift Packages → Add Package Dependency … to open the “Choose Package Repository” dialog.

Go ahead and paste the Lottie Github URL ( https://github.com/airbnb/lottie-ios ) into the dialog and click “Next”.

Enter Github URL

In the next dialog, select version as “Up to Next Major” so that Xcode will download the latest version of Lottie from Github.

Select version to install

Lastly, check “Lottie” to add the library to your application target and click “Next”. Xcode will automatically install the library for you.

Add Lottie to application target

To verify that the installation is successful, you can try to import the library in your application delegate.

import Lottie

If your project is able to build without any error, then you are good to go.

Displaying Lottie Animation

The Lottie library consists of 2 essential components:

• Animation  — The backing model for an animation that is deserialized from a JSON file.
• AnimationView  — A  UIView  subclass responsible for loading and rendering the  Animation

The way to display a Lottie animation is actually pretty straight forward.

1. Create an Animation object and load it into an AnimationView .
2. Add the AnimationView into a view controller.
3. Play the animation.

// Create Animation object
let jsonName = "Watermelon"
let animation = Animation.named(jsonName)

// Load animation to AnimationView
let animationView = AnimationView(animation: animation)
animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

// Add animationView as subview
view.addSubview(animationView)

// Play the animation
animationView.play()

Note that I am using the Watermelon.json sample animation that can be obtained from the Lottie example project on Github.

Here’s the end result animation.

The Watermelon.json animation

Pretty awesome right?

Basic Lottie Animation Playback

Since Lottie animations are being rendered realtime within your application, therefore you can have full control over when to play , stop or pause the animations.

You can use the play() , stop() and pause() method of AnimationView to control the animation playback.

// Play the animation
animationView.play()

// Stop the animation
animationView.stop()

// Pause the animation
animationView.pause()

Lottie animation basic playback

Animation Basic Configurations

Besides controlling the animation playback, Lottie library also provides ways for developers to configure the animation based on their needs.

For example, you can change the content mode of the animation view to scale the animation to your preferred size.

// Set animation view content mode
animationView.contentMode = .scaleAspectFit

Because AnimationView is a subclass of UIView , therefore you can expect setting content mode on the AnimationView is just like setting content mode on the UIView .

Next up, let’s take a look at how you can configure the animation speed . The speed of Lottie animation is represented by a CGFloat value and it has a default value of 1.

In order to make the animation go faster, you can set the animation speed to a value larger than 1. Likewise, you can set a value smaller than 1 to slow down the animation.

// Speed up animation
animationView.animationSpeed = 2.0

// Slow down animation
animationView.animationSpeed = 0.5

animationView.animationSpeed = 2.0

Lastly, let’s look at how to configure the animation’s looping behavior by changing the animation view’s loop mode .

// Set animation loop mode
animationView.loopMode = .loop

By default, the animation view will have loop mode of playOnce . However, Lottie library does provide a few others loop modes for developers to choose from. Here are all the loop modes supported by Lottie.

public enum LottieLoopMode {
  /// Animation is played once then stops.
  case playOnce
  /// Animation will loop from beginning to end until stopped.
  case loop
  /// Animation will play forward, then backwards and loop until stopped.
  case autoReverse
  /// Animation will loop from beginning to end up to defined amount of times.
  case `repeat`(Float)
  /// Animation will play forward, then backwards a defined amount of times.
  case repeatBackwards(Float)
}

animationView.loopMode = .autoReverse

Wrapping Up

Lottie is a very powerful library and it can definitely do more than what being covered in this article. However, the information in this article should be sufficient to help you get started.

I will be covering some other more advanced Lottie animation topics in my future articles. If you would like to get notified when a new article comes out, you can follow me on Twitter and subscribe to my monthly newsletter.

Last but not least, make sure to check out this great site where you can find tons of beautifully made Lottie animation — https://lottiefiles.com/

Thanks for reading. ‍:computer:

References

• http://airbnb.io/lottie/#/ios
• https://github.com/airbnb/lottie-ios
• https://github.com/airbnb/lottie-web
• https://github.com/buba447/Lottie-Sketch-Export