Sunday, November 27, 2022
HomeiOS DevelopmentA Starting's Information to Lottie: Creating Superb Animations in iOS Apps

A Starting’s Information to Lottie: Creating Superb Animations in iOS Apps


Good UI animations can drastically enhance person expertise of a cell app whether it is accomplished exactly. It’s often one of many elements that differentiates an awesome app from a mediocre one. Designing a significant and purposeful animation is tough. The identical goes for implementation. Specifically, if the animation or view transition is extraordinarily complicated, it’s a onerous process for iOS builders to implement it within the app.

Assuming you aren’t an indie developer, you might be in all probability working in a staff of builders and UI/UX designers. What number of instances have you ever come throughout this example? Your designer exhibits you a pleasant and funky animation, and asks you to include it within the app. You assume the animation appears to be like actually cool, nevertheless it’s totally onerous and a prolonged course of to implement it.

Now with Lottie, created by Airbnb, builders can simply render animations with out the necessity of writing traces and features of code. You’ll be able to take animations from Adobe After Results and use them immediately in your Xcode undertaking. It’s actually cool and saves you tons of time from implementing the animations.

On this tutorial, I’ll present you just a few issues:

  • What’s Lottie?
  • The place are you able to get Lottie animation information?
  • How do you utilize it in your iOS tasks?

What’s Lottie?

First issues first, what’s Lottie? Developed by Airbnb, Lottie is an iOS, macOS, Android, and React Native library that renders After Results animations in any native app. Animations are exported as JSON information by means of an open-source After Results extension referred to as Bodymovin. Lottie hundreds the animation knowledge in JSON format, and renders the animation in actual time.

In different phrases, you’ll be able to drop the JSON information, handed by your designer, proper into your Xcode undertaking and let Lottie load the animation for you. Don’t get me incorrect. You continue to want to put in writing some code to create the animation, however as you will notice later, Lottie saves you an immense period of time from coding the animation.

Lottie is now open supply and accessible on GitHub. It additionally comes with a pattern undertaking and a set of pattern animations. Have a look beneath for some pattern animations you could create in iOS apps with Lottie.

Lottie Animation Recordsdata

Earlier than utilizing Lottie, the very first thing you want is the animation knowledge exported as JSON information. If you have already got an After Results animation, use the extension referred to as Bodymovin to create the JSON file.

What if you don’t use After Results? How are you going to put together the animation?

You’ll be able to both rent a designer to create the animation for you, otherwise you learn to use After Results.

Fortunately, there’s yet one more choice: Lottie Recordsdata

Lottie Files

Lottie Recordsdata is an internet site that has a group of top of the range animations accessible in Lottie’s file format. It additionally lets designers share and showcase their animations. All of the animation information are free for obtain. Like me, for those who do not need any expertise with After Results, you’ll positively discover the library superb.

Utilizing Lottie in Xcode

Assuming you have got an animation file, the following factor is to arrange your Xcode undertaking. Much like different iOS libraries, the simplest strategy to incorporate Lottie in your Xcode undertaking is through the use of CocoaPods.

Let’s construct a fast demo to see how you’re employed with Lottie.

First, hearth up Xcode and create a brand new undertaking utilizing the Single View Software template. Title the undertaking LottieDemo (or no matter identify you favor) and reserve it.

Creating a new Xcode project

Putting in the Lottie Library Utilizing CocoaPods

When you create the undertaking, give up Xcode after which open Terminal. We’re going to create a Podfile for the set up of Lottie library. I assume you have got some expertise with CocoaPods, and have it put in in your Mac.

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

Then open and edit the Podfile like this:

We merely add a line pod 'lottie-ios' to point the pod we want for this undertaking. Now return to Terminal and run the command beneath:

CocoaPods will then obtain the Lottie library and bundle it in your Xcode undertaking. When the method completes, you can find a brand new undertaking file named LottieDemo.xcworkspace. Open this file utilizing Xcode and begin coding.

Including the Animation JSON Recordsdata

It could be nice in case you have your individual animation file for testing Lottie. However for those who don’t have one, obtain this free animation within the type of JSON file from lottiefiles.com. We are going to use that for the fast demo.

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

Lottie JSON file

Creating LOTAnimationView

It now involves the enjoyable half. In lower than 10 traces of code, it is possible for you to to implement the pattern animation.

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

Subsequent, replace the viewDidLoad() methodology like this:

That’s the code snippet it is advisable to render the animation. Lottie has a category named LOTAnimationView that hundreds the animation knowledge from the JSON file. To show the animation, it’s a must to create a LOTAnimationView object with the JSON file that you simply downloaded earlier.

LOTAnimationView is a subclass of UIView, so that you simply implement it like every other views. We outline the body measurement, centre it, and set its content material mode to Side Fill. We then name addSubview so as to add the animation view to the principle view. Lastly, we name the play() methodology of the animation view to begin the animation.

Now run the undertaking and see how the app appears to be like. As quickly because the app launches, it renders the animation in actual time.

lottie-sample-4

Looping the Animation

By default, the animation solely performs as soon as. If you wish to loop the animation, you’ll be able to set the loopAnimation property to true like this:

The LOTAnimationView class additionally gives quite a lot of properties to customise the animation. Say, if you wish to decelerate the animation, you’ll be able to merely change the animationSpeed property like beneath:

Loading the Animation JSON File from a Distant Server

Not solely are you able to retailer the JSON file regionally, you’ll be able to put your animation knowledge on a distant server. Lottie already comes with APIs for builders to load the JSON file from a distant URL. Attempt to exchange the initialization of animationView with the code beneath, and see what animation you’ll get.

Making use of Rework to the Animation View

Like UIView, LOTAnimationView helps several types of rework. You’ll be able to rotate, resize and reposition the animation by setting an acceptable rework to the rework property. Here’s a pattern rework, which rotates the animation by 45 levels clockwise:

Equally, you’ll be able to apply UIView animation over the animation similar to different customary UIView object. Let’s create a resize animation on high of the present animation. Change the viewDidLoad() methodology with this code snippet:

Run the app and you’ll get one thing like this. Fascinating, proper?

lottie-sample-5

What’s Subsequent?

Nice UI animations can take your iOS app to the following stage, and supply your customers with a fascinating expertise. Earlier than the introduction of Lottie, it’s actually onerous and time consuming to rework an animation constructed with After Results to an actual implementation. Now this highly effective animation library simply makes the implementation easy.

On this tutorial, it’s best to have discovered find out how to use Lottie for iOS tasks. Right here I simply cowl the fundamentals of Lotties. You’ll be able to additional take a look at the documentation of Lottie on GitHub. Moreover, we are going to look into one thing extra superior within the subsequent tutorial by constructing a tremendous onboarding animation.

Keep tuned. In the event you love this tutorial, please go away me a remark and share it with your folks.

For reference, you’ll be able to obtain the pattern Xcode undertaking on GitHub.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments