iOS Tutorials: Animation with Lottie

swift 4.2 | xcode 10

OVERVIEW

Let’s be honest, animations on an app does make a huge difference. With that, let’s look into the third part library Lottie engineered by the AirBnB team. Lottie is some of the most popular animation third party library.

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!

There are lot of animations that you can download. Simply head to https://www.lottiefiles.com and download the json file. Let’s not forget that we need to configure our Cocoapods. If you have no idea, check out my link.

Once you are done, let’s design our storyboard.

DESIGNING THE STORYBOARD

We will be using UIView and make sure to use LOTAnimationView for the class. I’ve made my UIView light gray just so you can see I am using a UIView.

You could probably resize it to your own desire. Once you are done, let’s head to Lottie Files to download some JSON files for the animation to take place.

I think I’ll probably download the motorcycle json file.

WRITING THE CODE

Once you have downloaded the json you needed for your animation, simply drag it into your project and we are going to start coding. Make sure that you have imported Lottie and created an IBOutlet too.

Once I have all those down, let’s write some neat codes where I create a function and set my json file into the animation.

With the code above, you probably notice that your animation only place once. However, if you would like you animation to keep playing, simply add the following code

animationView.loopAnimation = true

Once you got all those down, you can see the animation on your screen. You may change the background color to have a better view. You can find the code at Github

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*