Animation is a critical part of your mobile application user interfaces. Animation draws the user’s attention toward things that change, things that a simple image or text cannot do, while adding a touch of fun and style to your app’s UI.
Even more importantly, animation is one of the key ways to ensure that your app stands out in a crowded market.

What is Lottie? And what does it do to make my life easier?

First of all, I am excited to show you this amazing feature available on almost every platform. Whether you are a Swift developer only focusing on iPhone, a web developer using HTML and dynamic CSS, or even a cross platform developer using React native, now is the time to animate your work. Even Xamarin specialists can get in on the action!

For the last few years, large companies have gotten into the habit of revealing the code that they have implemented and tested in their company to the general public. Today, we will be looking at AirBnB, a brand that has distinguished itself through a simple but beautiful application with flawless animation. Airbnb has created a framework OpenSource and is now available on Github. The library allows anyone to implement animations simply and efficiency. Lottie was released in the summer of 2016 and there is a strong chance that you have heard the name or already know what it does. For those of you for whom that is not the case, you might learn something very cool.

BTW : Now Lottie has released its version 2.

How does it work?

Lottie provides you with a tool that will read a JSON that you’ve created with After Effects and have exported with BodyMovin or downloaded. Lottie then creates the animation from this file. It means that you will be able to render animations in real time and maintain complete control without losing the space required for image storage. And because it’s a JSON the animation can be downloaded from anywhere and is scalable.

I do not know how to use After Effects, do I have to learn and buy the software?

Don’t worry, Lottie provides a website that allows users to preview how their animation will appear if created or downloaded from an exterior platform. You can download a lot that can be integrated into your application.

You can visit https://www.lottiefiles.com/ and choose the animation of your choice. Sometime you will find the AEP file that will allow you to modify the animation. I have uploaded the Cellenza logo as well, feel free to download it!

But if you do want to try to create your own animation go for it. When downloaded After Effects, you will have a 7 days free trial.

YES, IT IS THAT EASY!

Xamarin Android

Lottie supports Ice Cream Sandwich (API 14) and above. The simplest way to use it is with LottieAnimationView:

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

Or you can load it programatically in multiple ways.

LottieAnimationView animationView = FindViewById<LottieAnimationView>(Resource.Id.animation_view);
animationView.SetAnimation("hello-world.json");
animationView.Loop = true;

Xamarin iOS

The simplest way to use it is with LOTAnimationView:

LOTAnimationView animation = LOTAnimationView.AnimationNamed("LottieLogo1");
this.View.AddSubview(animation);
animation.PlayWithCompletion((animationFinished) => {
  // Do Something
});
//You can also use the awaitable version
//var animationFinished = await animation.PlayAsync();

Or you can load it programmatically from a NSUrl

LOTAnimationView animation = new LOTAnimationView(new NSUrl(url));
this.View.AddSubview(animation);

What does lottie support after effects features?

It important to know that lottie doesn’t support every features of after effects. This is what you can do.

Keyframe Interpolation

• Linear Interpolation
• Bezier Interpolation
• Hold Interpolation
• Rove Across Time
• Spatial Bezier

Solids

• Transform Anchor Point
• Transform Position
• Transform Scale
• Transform Rotation
• Transform Opacity

Masks

• Path
• Opacity
• Multiple Masks (additive)

Track Mattes

• Alpha Matte

Parenting

• Multiple Parenting
• Nulls

Shape Layers

• Rectangle (All properties)
• Ellipse (All properties)
• Polystar (All properties)
• Polygon (All properties. Integer point values only.)
• Path (All properties)
• Anchor Point
• Position
• Scale
• Rotation
• Opacity
• Group Transforms (Anchor point, position, scale etc)
• Multiple paths in one group

Stroke (shape layer)

• Stroke Color
• Stroke Opacity
• Stroke Width
• Line Cap
• Dashes

Fill (shape layer)

• Fill Color
• Fill Opacity

Trim Paths (shape layer)

• Trim Paths Start
• Trim Paths End
• Trim Paths Offset

This was a quick article highlighting a library that will help you create fantastic and unique applications that corresponds to your personality. Next up, I will share more on how to create a cool and light animation from scratch and implement it from within a mobile application using Xamarin. Stay tuned!