You are currently viewing Getting Started with Lottie Animations in iOS

Getting Started with Lottie Animations in iOS

✅ Updated for Lottie 4.2.0

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

Lottie supports and renders animation exported in bodymovin JSON format. There are a 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 for developers to recreate them 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 sample animation
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.

Setapp
Access 240+ apps in one place

Try it for free now!

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 Lottie Github URL into Swift Package Manager
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 Lottie library in Swift Package Manager
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 into application target
Add Lottie to the 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:

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

The way to display a Lottie animation is actually pretty straightforward.

  1. Create an LottieAnimation object and load it into an LottieAnimationView.
  2. Add the LottieAnimationView into a view controller.
  3. Play the animation.
// Create Animation object
let jsonName = "Watermelon"
let animation = LottieAnimation.named(jsonName)

// Load animation to AnimationView
let animationView = LottieAnimationView(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.

Showing Lottie animation
The Watermelon.json animation

Pretty awesome right?

Basic Lottie Animation Playback

Since Lottie animations are being rendered in real-time 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 LottieAnimationView to control the animation playback.

// Play the animation
animationView.play()

// Stop the animation
animationView.stop()

// Pause the animation
animationView.pause()
Lottie animation basic playback
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 LottieAnimationView is a subclass of UIView, therefore you can expect setting content mode on the LottieAnimationView 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
Lottie animation with double playback speed
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 a loop mode of playOnce. However, Lottie iOS library does provide a few other 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)
}
Lottie animation with reverse looping
animationView.loopMode = .autoReverse

Wrapping Up

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

If you would like to learn more about Lottie animation playback, check out this article.

🔗 Lottie Advance Animation Playback

I will be covering some other more advanced Lottie animation topics in the near future. 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. 🧑🏻‍💻

References

👋🏻 Hey!

While you’re still here, why not check out some of my favorite Mac tools on Setapp? They will definitely help improve your day-to-day productivity. Additionally, doing so will also help support my work.

  • ✨ Bartender: Superpower your menu bar and take full control over your menu bar items.
  • ✨ CleanShot X: The best screen capture app I’ve ever used.
  • ✨ PixelSnap: Measure on-screen elements with ease and precision.
  • ✨ iStat Menus: Track CPU, GPU, sensors, and more, all in one convenient tool.
Tags: , , ,