What is Lottie?

Lottie is an iOS, Android, and React Native library that renders the After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Why Lottie?

  • Flexible After Effects features.
  • Manipulate your animation any way you like.
  • Small file sizes.
  • Lottie has awesome library and is also available in Xamarin.Forms.

Here are some important link to checkout the repository and very thanks to Martijn van Dijk -https://github.com/martijn00/LottieXamarin

NuGet package - https://www.nuget.org/packages/Com.Airbnb.Xamarin.Forms.Lottie/2.3.4

Download and install the Lottie from NuGet by running the following command.

Install-Package Com.Airbnb.Xamarin.Forms.Lottie -Version 2.3.4

Now, install the Lottie package in all your projects.



Now, you need to initialize the Lottie plugin in both projects - Android (In MainActivity) and iOS (In AppDelegate) using AnimationViewRenderer.Init();

Initialize the Lottie plugin in Android Project in MainActivity.



Initialize the Lottie plugin in iOS Project AppDelegate.



Now, we use JSON. If you don’t have one, you can choose JSON file from here:https://www.lottiefiles.com/

Now, add the JSON file in the iOS project and make sure you have the build action in Bundle Resource.

Select animation JSON and right-click. Then, click on "Property".



In Android, add your JSON and make sure you have the build action in Android Assets folder.

Select the animation JSON and right-click. Then, click on "Property".



Now, let us write the code in XAML and add the reference.

xmlns:forms=“clr-namespace:Lottie.Forms;assembly=Lottie.Forms“
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:local="clr-namespace:LottieSample"
  5. x:Class="LottieSample.MainPage"
  6. xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms">
  7. <ContentPage.Content>
  8. <StackLayout>
  9. <forms:AnimationView x:Name="AnimationView" Animation="motorcycle.json" AutoPlay="True"
  10. Loop="True" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
  11. </StackLayout>
  12. </ContentPage.Content>
  13. </ContentPage>
TADAA!

You should have your animation working!!

Lottie Animation In Android

Lottie Animation in iOS

Use this animation event code to play and pause the animation.

  1. OnPlay="AnimationView_OnPlay" OnPause="AnimationView_OnPause"