Animations using Lottie in iOS

Learn how to create JSON animations using Lottie Library in Swift

Lottie is a library for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively. It makes it a lot easier for designers and developers to run their animations into their applications.

Animations always is a plus for our apps. I wrote this tutorial to simplify and show you how to use Lottie Library in an easy way.

You can download some animated Lottie JSON at https://lottiefiles.com and drag it to your xcodeproject folder.

For this tutorial, i'm using this beautiful rocket:

https://lottiefiles.com/21878-rocket

If you want, download it and follow this tutorial 😁

1. First, you need to setup the pod to your Xcode project (if you don’t have it, please visit https://cocoapods.org to know more about it)
2. In the terminal, write the command ‘pod init’ in your Xcodeproject folder
3. Open the podfile and write ‘pod ‘lottie-ios’’. Your podfile should be like this:

4. Then, in the terminal, write pod install

So, now your Lottie Pod is installed and you can open YourProject.xcworkspace.

5. In storyboard, you can add a view and set it's size based on your animation size, with the following configuration:

Class: AnimationView and Module: Lottie

Don’t forget to change the view background color to Clear.

6. Import Lottie on ViewController.swift

8. Set an IBOutlet (I named it 'animatedView') for your view in your ViewController and create the following method:

I recommend to call at viewWillAppear

Lottie give you some loop mode options that you can use:

• autoreverse: your animation will start from the end to the beginning
• loop: it will loop from the beginning to the end until it stops
• playonce: it will animate just one time and it will stop
• repeat: it will loop from beginning to end a defined amount of times
• repeat backwards: it will play forward, then backwards a defined amount of times

Build and run your application 😄

https://lottiefiles.com/21878-rocket

You can learn how to export animations as JSON using Adobe After Effect on https://medium.com/spemer/using-airbnb-lottie-with-after-effects-plug-in-bodymovin-c3608c9aa82

Pretty easy, right?

Now you are able to transform and give some magic to your application 🥳

Did you like it? Do you have any trouble? Give me some feedbacks 😉