Easily Animate Your Xamarin Applications with Lottie Animations

Adding simple animations to any application will make it look better. Xamarin.Forms provides native options to work with animations, but using Lottie animations makes it easier to add animation to your application. Lottie animations are open-source packages that cost nothing to access and use in Xamarin applications. Please refer to this GitHub repository for the ReadMe and license files of Lottie animation projects.

Lottie animations animate elements using a JSON file, which provides the content to render the animation. There are a lot of things we can do with Lottie animations. In the following image, I have used Lottie animations to display an animated tooltip in a world map. It pops up with the name of the geolocation tapped.

The following resources are needed to create this Xamarin.Forms application:

• Lottie NuGet packages
• Lottie JSON file containing the animation
• Syncfusion Maps control

Steps to add a Lottie animation in the Syncfusion Maps control

Step 1: Create a Xamarin.Forms blank application.

Step 2: Add the following NuGet packages to the application:

• Xamarin.SfMaps
• Lottie NuGet packages

Step 3: To create a map, add the world-map.shp and world-map.dbf files as resources to the project. To learn more about these resources, please refer to this documentation.

Step 4: Now add a SfMaps control to display the map in your view.

<maps:SfMaps BackgroundColor="White" VerticalOptions="FillAndExpand">
            <maps:SfMaps.Layers >
                <maps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding DataSource}" ShapeIDPath="Country" ShapeIDTableField="admin"/>
            </maps:SfMaps.Layers>
</maps:SfMaps>

Step 5: Copy this Lottie animation JSON file to your Android, iOS, and UWP projects.

Step 6: Add a Lottie animation view as a TooltipTemplate of SfMap control.

<!--Add a map with tooltip to your application -->
<maps:SfMaps BackgroundColor="White" VerticalOptions="FillAndExpand">
            <maps:SfMaps.Layers >
                <maps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding DataSource}" ShapeIDPath="Country"
                                     ShapeIDTableField="admin">
                    <maps:ShapeFileLayer.TooltipSettings>
                        <maps:TooltipSetting
                            ShowTooltip="True"
                            StrokeColor="Transparent"
                            BackgroundColor="Transparent"
                            ValuePath="Country"
                            Duration="1000">
                            <maps:TooltipSetting.TooltipTemplate>
                                <DataTemplate>

                                    <!--JSON file for animation -->
                                    <forms:AnimationView
                                            Animation="mapmaker.json"
                                            Loop="True" IsPlaying="True"
                                            VerticalOptions="FillAndExpand" 
                                            HorizontalOptions="FillAndExpand" HeightRequest="70" WidthRequest="70"/>
                                </DataTemplate>
                            </maps:TooltipSetting.TooltipTemplate>
                        </maps:TooltipSetting>
                    </maps:ShapeFileLayer.TooltipSettings>
                </maps:ShapeFileLayer>
            </maps:SfMaps.Layers>
</maps:SfMaps>

Now the Lottie animation will be displayed as a pop-up for every tap within the map.

You can download the complete sample from this GitHub location.

Conclusion

I hope you now have a clear idea of how to use Lottie animation in Xamarin.Forms applications. The same procedure can be followed to add Lottie animations to any template of the Syncfusion Xamarin UI controls.

Please refer to this link to check out the available JSON files for adding animation to your Xamarin.Forms application.

If you liked this article, we think you’ll also enjoy the following ebooks and blog posts:

• [Ebook] Xamarin.Forms Succinctly
• [Ebook] Xamarin.Forms for macOS Succinctly
• [Blog] 7 Ways to Boost Your Xamarin Development Productivity
• [Blog] Designing an Airfare Calendar in Xamarin.Forms