Creating Animations in .NET MAUI Using NuGet Packages

 There are several excellent NuGet packages that can help you create sophisticated animations for your MAUI splash screen or other parts of your application. Here are the best options:

1. Lottie for MAUI (Recommended for complex animations)

Package: MauiLottie

Lottie allows you to use Adobe After Effects animations exported as JSON files.

Implementation:

1. Install the package:

   bash

   dotnet add package MauiLottie

2. Add your Lottie JSON file to Resources/Raw folder

3. Use in XAML:

   xml

   <lottie:LottieAnimationView
       AnimationSource="EmbeddedResource"
       Animation="YourNamespace.Resources.Raw.splash_animation.json"
       Loop="True"
       AutoPlay="True"
       HorizontalOptions="FillAndExpand"
       VerticalOptions="FillAndExpand"/>

4. Control programmatically:

   csharp

   lottieView.PlayAnimation();
   lottieView.PauseAnimation();
   lottieView.StopAnimation();

2. SkiaSharp for Custom Animations

Package: SkiaSharp.Views.Maui.Controls

For custom drawn animations with great performance.

Example Implementation:

csharp

using SkiaSharp;
using SkiaSharp.Views.Maui;

public class AnimatedSplashView : SKCanvasView
{
    private float _rotationAngle;
    
    protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;
        canvas.Clear(SKColors.White);
        
        using var paint = new SKPaint
        {
            Color = SKColors.Blue,
            IsAntialias = true,
            Style = SKPaintStyle.Fill
        };
        
        canvas.RotateDegrees(_rotationAngle, e.Info.Width/2, e.Info.Height/2);
        canvas.DrawCircle(e.Info.Width/2, e.Info.Height/2, 50, paint);
    }
    
    public async Task StartAnimation()
    {
        while(true)
        {
            _rotationAngle += 5;
            InvalidateSurface();
            await Task.Delay(16); // ~60fps
        }
    }
}

3. Xamanimation

Package: Xamanimation

Provides pre-built animations that are easy to implement.

Example Usage:

1. Install the package:

   bash

   dotnet add package Xamanimation

2. Add namespace to XAML:

   xml

   xmlns:xamanimation="clr-namespace:Xamanimation;assembly=Xamanimation"

3. Use animations:

   xml

   <Image Source="logo.png">
       <Image.Behaviors>
           <xamanimation:AnimateDoubleProperty 
               PropertyName="Opacity"
               From="0"
               To="1"
               Duration="00:00:02"/>
           <xamanimation:ScaleToAnimation 
               Scale="1.5"
               Duration="00:00:01"
               Delay="00:00:02"/>
       </Image.Behaviors>
   </Image>

4. Maui.Graphics.Controls

Package: Maui.Graphics.Controls

For advanced custom drawing and animations.

Example:

csharp

using Microsoft.Maui.Graphics;
using Microsoft.Maui.Graphics.Controls;

public class AnimatedControl : GraphicsView
{
    private float _progress;
    
    public AnimatedControl()
    {
        Drawable = new SplashDrawable(this);
        
        // Start animation
        Dispatcher.StartTimer(TimeSpan.FromMilliseconds(16), () =>
        {
            _progress = (_progress + 0.01f) % 1;
            Invalidate();
            return true;
        });
    }
    
    class SplashDrawable : IDrawable
    {
        private readonly AnimatedControl _parent;
        
        public SplashDrawable(AnimatedControl parent) => _parent = parent;
        
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Custom drawing based on _parent._progress
            canvas.FillColor = Colors.Blue.WithAlpha(0.5f);
            canvas.FillEllipse(dirtyRect.Width * _parent._progress, 
                              dirtyRect.Height/2, 
                              50, 50);
        }
    }
}

5. MauiAnimation

Package: MauiAnimation

Another good animation library specifically for MAUI.

Example:

csharp

using MauiAnimation;

// In your page
await myImage.Animate(new HeartAnimation());

Choosing the Right Approach

1. For complex, designer-created animations: Use Lottie

2. For simple UI element animations: Use Xamanimation or MauiAnimation

3. For custom drawn animations: Use SkiaSharp or Maui.Graphics.Controls

4. For performance-critical animations: Use SkiaSharp

Complete Splash Screen Example with Lottie

csharp

public partial class AnimatedSplashPage : ContentPage
{
    public AnimatedSplashPage()
    {
        InitializeComponent();
        
        // Start animation when page appears
        this.Appearing += async (s, e) => 
        {
            await Task.Delay(500); // Initial delay
            await lottieView.PlayAnimationAsync();
            
            // Navigate after animation completes
            await Shell.Current.GoToAsync("//MainPage");
        };
    }
}

Remember to add the Lottie JSON file to your project's Resources/Raw folder and set its Build Action to "MauiAsset".