Tutorial

A Beginning’s Guide to Lottie: Creating Amazing Animations in iOS Apps


Good UI animations can greatly improve user experience of a mobile app if it is done precisely. It is usually one of the factors that differentiates a great app from a mediocre one. Designing a meaningful and functional animation is hard. The same goes for implementation. In particular, if the animation or view transition is extremely complex, it is a hard task for iOS developers to implement it in the app.

Assuming you are not an indie developer, you are probably working in a team of developers and UI/UX designers. How many times have you come across this situation? Your designer shows you a nice and cool animation, and asks you to incorporate it in the app. You think the animation looks really cool, but it’s utterly hard and a lengthy process to implement it.

Now with Lottie, created by Airbnb, developers can easily render animations without the need of writing lines and lines of code. You can take animations from Adobe After Effects and use them directly in your Xcode project. It is really cool and saves you tons of time from implementing the animations.

In this tutorial, I will show you a few things:

  • What is Lottie?
  • Where can you get Lottie animation files?
  • How do you use it in your iOS projects?

What is Lottie?

First things first, what is Lottie? Developed by Airbnb, Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. Animations are exported as JSON files through an open-source After Effects extension called Bodymovin. Lottie loads the animation data in JSON format, and renders the animation in real time.

In other words, you can drop the JSON files, passed by your designer, right into your Xcode project and let Lottie load the animation for you. Don’t get me wrong. You still need to write some code to create the animation, but as you will see later, Lottie saves you an immense amount of time from coding the animation.

Lottie is now open source and available on GitHub. It also comes with a sample project and a set of sample animations. Take a look below for some sample animations that you can create in iOS apps with Lottie.

Lottie Sample Animation #1
Lottie Sample Animation #2
Lottie Sample Animation #3

Lottie Animation Files

Before using Lottie, the first thing you need is the animation data exported as JSON files. If you already have an After Effects animation, use the extension called Bodymovin to create the JSON file.

What if you do not use After Effects? How can you prepare the animation?

You can either hire a designer to create the animation for you, or you learn how to use After Effects.

Luckily, there is one more option: Lottie Files

Lottie Files

Lottie Files is a website that has a collection of high quality animations available in Lottie’s file format. It also lets designers share and showcase their animations. All the animation files are free for download. Like me, if you do not have any experience with After Effects, you will definitely find the library amazing.

Using Lottie in Xcode

Assuming you have an animation file, the next thing is to prepare your Xcode project. Similar to other iOS libraries, the easiest way to incorporate Lottie in your Xcode project is by using CocoaPods.

Let’s build a quick demo to see how you work with Lottie.

First, fire up Xcode and create a new project using the Single View Application template. Name the project LottieDemo (or whatever name you prefer) and save it.

Creating a new Xcode project

Installing the Lottie Library Using CocoaPods

Once you create the project, quit Xcode and then open Terminal. We are going to create a Podfile for the installation of Lottie library. I assume you have some experience with CocoaPods, and have it installed on your Mac.

In terminal, run the following command to create a Podfile:

Then open and edit the Podfile like this:

We simply add a line pod 'lottie-ios' to indicate the pod we need for this project. Now go back to Terminal and run the command below:

CocoaPods will then download the Lottie library and bundle it in your Xcode project. When the process completes, you will find a new project file named LottieDemo.xcworkspace. Open this file using Xcode and start coding.

Adding the Animation JSON Files

It would be great if you have your own animation file for testing Lottie. But if you don’t have one, download this free animation in the form of JSON file from lottiefiles.com. We will use that for the quick demo.

Now drag the JSON file (servishero_loading.json) into the project navigator of your Xcode project. Put it under the LottieDemo group.

Lottie JSON file

Creating LOTAnimationView

It now comes to the fun part. In less than 10 lines of code, you will be able to implement the sample animation.

Open ViewController.swift and add a line of code to import the Lottie library:

Next, update the viewDidLoad() method like this:

That’s the code snippet you need to render the animation. Lottie has a class named LOTAnimationView that loads the animation data from the JSON file. To display the animation, you have to create a LOTAnimationView object with the JSON file that you downloaded earlier.

LOTAnimationView is a subclass of UIView, so you just implement it like any other views. We define the frame size, centre it, and set its content mode to Aspect Fill. We then call addSubview to add the animation view to the main view. Lastly, we call the play() method of the animation view to start the animation.

Now run the project and see how the app looks. As soon as the app launches, it renders the animation in real time.

lottie-sample-4

Looping the Animation

By default, the animation only plays once. If you want to loop the animation, you can set the loopAnimation property to true like this:

The LOTAnimationView class also provides a number of properties to customize the animation. Say, if you want to slow down the animation, you can simply change the animationSpeed property like below:

Loading the Animation JSON File from a Remote Server

Not only can you store the JSON file locally, you can put your animation data on a remote server. Lottie already comes with APIs for developers to load the JSON file from a remote URL. Try to replace the initialization of animationView with the code below, and see what animation you will get.

Applying Transform to the Animation View

Like UIView, LOTAnimationView supports different types of transform. You can rotate, resize and reposition the animation by setting an appropriate transform to the transform property. Here is a sample transform, which rotates the animation by 45 degrees clockwise:

Similarly, you can apply UIView animation over the animation just like other standard UIView object. Let’s create a resize animation on top of the current animation. Replace the viewDidLoad() method with this code snippet:

Run the app and you will get something like this. Interesting, right?

lottie-sample-5

What’s Next?

Great UI animations can take your iOS app to the next level, and provide your users with an engaging experience. Before the introduction of Lottie, it is really hard and time consuming to transform an animation built with After Effects to a real implementation. Now this powerful animation library just makes the implementation effortless.

In this tutorial, you should have learned how to use Lottie for iOS projects. Here I just cover the basics of Lotties. You can further check out the documentation of Lottie on GitHub. Furthermore, we will look into something more advanced in the next tutorial by building an amazing onboarding animation.

Stay tuned. If you love this tutorial, please leave me a comment and share it with your friends.

For reference, you can download the sample Xcode project on GitHub.

iOS
What’s New in Natural Language APIs in iOS 13
SwiftUI
How to Implement Search for SwiftUI List Using Searchable
iOS
Working with Game Center and Game Kit Framework
  • carl0scer0n

    Excelent tutorial and nice library Thanks Simon.


  • vira

    viravira

    Author Reply

    As usual, clear language and precise. Looking forward for the on boarding one !


  • vira

    viravira

    Author Reply

    Question. How to use the same on a button or on a label, so when a user clicks, it should animate? Thanks.


    • Darlan ten Caten

      Just hide the button when touched and show the LOTAnimationView.


      • Konstantin

        KonstantinKonstantin

        Author Reply

        if user taps again immediately while animation is running, is it suspended an animation or maybe will animate reversely and unhide my button back on screen?!


  • sarah maxwell

    Nice article Simon Ng,

    Lottie is the best mobile library for android and iOS app developers
    that parses adobe after effects animations exported as JSON with Bodymovin and renders them natively on mobile!


  • JD Daniel

    JD DanielJD Daniel

    Author Reply

    Hi,
    I followed the steps, but it says “Arguments labels ‘(name)’ do not match any available overloads”, anyone got this problem?


  • Dung Thùy

    Dung ThùyDung Thùy

    Author Reply

    All books Learn IOS by Ray Wenderlich (RxSwift, Ios Animations, Advanced Apple Debugging, Game 2d, 3d TvOs)new version swift 3 PDF Full source code

    Recently I bought a set of 12 books Learn IOS, tutorial by Ray Wenderlich , And now I want to transfer it to you for $ 60, All books are the latest version that supports swift 3 and have full source code. I will share it for you for $ 60 Includes pdf and full source code, you can download on Google Drive, when the book has a new version i will get it for you

    if you are interested, please contact me by Email: [email protected] or skype: tvtruong91.

    Thank you

    You can see the full description at http://www.prograbooks.com/2017/04/download-all-books-learn-ios-by-ray.html

    1. RxSwift Reactive Programming with Swift First Edition Ray Wenderlich
    2. Advanced Apple Debugging & Reverse Engineering
    3. Swift Apprentice Second Edition Begin Programming with Swift 3 Ray Wenderlich
    4. Ios Apprentice Fifth Edition Begin IOS development with Swift 3 Ray Wenderlich
    5. Tvos Apprentice Second Edition Begin TvOs development with Swift 3 Ray Wenderlich
    6. Ios 10 By Tutorials First Edition Learning the new IOS 10 APIs with Swift 3 Ray Wenderlich
    7. WatchOs By Tutorials Second Edition Making Apple Watch apps with watchOS 3 & Swift 3 Ray Wenderlich
    8. Core Data By Tutorials Third Edition IOS 10 and Swift 3 edittion Ray Wenderlich
    9. Ios Animations By Tutorials Third Edition IOS 10 and Swift 3 edition Ray Wenderlich
    10. 2D Apple Games By Tutorials Begin 2D IOS & tvOS Game Development with Swift 3 Ray Wenderlich
    11. 3D Apple Games By Tutorials Begin 3D IOS & tvOS Game Development with Swift 3 Ray Wenderlich
    12. Unity Games By Tutorials Make 4 complete unity games from scratch Using C# Ray Wenderlich


  • Mike Cole

    Mike ColeMike Cole

    Author Reply

    Lottie is the best mobile library for Android and iOS Application Development that natively renders vector-based animations and art in realtime with minimal code.


  • mTouch Labs

    We design, develop, and optimize native mobile applications for iOS and Android. All of it – right here in the house with our own developers. We can help you engage audiences and solve enterprise problems with a custom-built app for your business.


  • Versatile Mobitech

    Thanks for sharing this nice information. We at Mobile Application Development company with operations in Hyderabad. We have delivered enterprise level mobile apps and offer multiple solutions in, IOS, Android, Progressive Web Apps, development, ionic apps, etc.


Shares