Include beautiful After-Effects animations in your Xamarin apps
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations and renders them natively on mobile.
It was created by those clever people over at AirBnB, and you can find the library by managing your nuget packages and searching for Airbnb.
In Visual Studio, create a new Xamarin Forms project for iOS and Android and use the nuget package manager to install the Lottie packages.
You may have to restart Visual Studio and manually update some Android support packages that seem to sometimes get missed. As long as the versions of Xamarin.Android.Support.* are the same, you’re good to go.
Find an animation
A great place to start looking for an animation, if you’re not an After Effects guru yourself, is LottieFiles.com. You can browse and download a growing collection of animations and sign up for notifications if you want.
For the example code I chose Jump Loader and downloaded the JSON file.
Include the JSON
Next, include the JSON file in the platform projects. Place the file under Assets in the Android project and under Resources in the iOS project.
Initialise the library
For the animations to render on iOS, you will need to make a small change to AppDelegate.cs
Open the class and include the following using:
Then add the initialisation code after the Xamarin.Forms.Init() and before the LoadApplication.
global::Xamarin.Forms.Forms.Init(); AnimationViewRenderer.Init(); LoadApplication(new App());
Add an animation yo your XAML
Finally, add an AnimationView to your XAML.
<forms:AnimationView Animation="jump_loader.json" AutoPlay="True" Loop="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
In this example, we are telling Lottie to play our jump loader animation, auto-play when the XAML loads, and loop the animation indefinitely.
Lottie is a super easy way to get some stunning animations into your Xamarin Forms app. Take a look at the Lottie GitHub repo for more info.
You can download the example code at the XamarinInsider repo.
how to manipulate custom text lottie animation (1 want animation like that used in LottieLogo1.json) , thanks
Hi, there’s no concept of text in Lottie animations, so LottieLogo1 is just an After Effects animation like the others. You would need to create a new animation from scratch.