Applying animation in xamarin.forms

Question

Is there any way I can implement the animation like https://codemyui.com/circular-water-fill-loading-animation/ in Xamarin.forms?

Answer 1

The Lottie is my preferred, but you can use a animation with the Nuget XamAnimation. It most hard to create but it's so good too.

Answer 2

Is there any way I can implement the animation like ...

The short answer is; Yes.

The longer answer; It depends upon what you really need, only you can answer that.

A "quick way" (at least for me) is to use the Xamarin.Forms' WebView and embed the html/svg/css/JScript into native application projects and setup a javascript interface to control the percentage completion (the water.style.transform element).

• https://developer.xamarin.com/samples/xamarin-forms/WorkingWithWebview/

You could, of course, re-implement it using something like SkiaSharp, Lottie, etc and create a cross-platform Forms' control, or implement it as a "native" control on each platform.

Note: I'm a big fan of Lottie and would personally take that approach, but they do not support native UWP. Currently supported is iOS, Android, Web.

I edited the colors, etc. on that PEN sample you linked to and added the html/js/css to a Forms' solution, setup a JS interface and the results work in a Forms' WebView (iOS' UIWebView and Android's WebView, did not test UWP Edge, but it should work fine):