Dot.Blog | Animations avancées et synchronisation audio/vidéo en MAUI

MAUI propose une API d’animation simple mais puissante. Cependant, lorsqu’il s’agit de synchroniser des animations avec du son ou de la vidéo, il faut sortir des sentiers battus et exploiter le mécanisme de minuterie haute précision combiné à des composants multimédia.

Dans cet article, nous allons créer une animation qui réagit au rythme d'une bande sonore en cours de lecture, et illustrer le tout avec une pulsation de cercle synchronisée.

📅 1. Intégrer un lecteur audio

Utilisons le contrôle MediaElement fourni par MAUI :

<MediaElement x:Name="player"
              Source="beat.mp3"
              AutoPlay="True"
              ShowsPlaybackControls="False"
              IsLooping="True" />

🔧 2. Créer une vue animée personnalisée

Ajoutons un cercle qui "pulse" au rythme d’un tempo fixe (ex: 120 BPM).

<GraphicsView x:Name="PulseCanvas"
              Drawable="{Binding PulseDrawable}"
              HeightRequest="200"
              WidthRequest="200" />

Dans la vue-modèle ou code-behind :

public class PulseDrawable : IDrawable
{
    private float radius = 50;
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.FillColor = Colors.DeepSkyBlue;
        canvas.FillCircle(dirtyRect.Center.X, dirtyRect.Center.Y, radius);
    }

    public void Pulse()
    {
        radius = 100;
        Task.Delay(100).ContinueWith(_ => {
            radius = 50;
        });
    }
}

⏱️ 3. Synchroniser via un tempo

Supposons un BPM de 120 (1 battement toutes les 500 ms). On utilise une minuterie :

var bpm = 120;
var interval = 60000 / bpm; // ms

DispatcherTimer timer = new();
timer. Interval = TimeSpan.FromMilliseconds(interval);
timer. Tick += (s, e) => {
    drawable.Pulse();
    PulseCanvas.Invalidate();
};
timer.Start();

⚡ On pourrait aussi synchroniser sur la position audio : player.Position

🔍 Autres usages concrets

Faire clignoter un bouton au tempo d’un métronome
Afficher un indicateur de mesure (beat 1, beat 2, etc.)
Gérer des animations adaptées à un signal audio réel (avec FFT externe)

✅ Conclusion

MAUI permet des animations fluides et réactives. En combinant GraphicsView, MediaElement et un DispatcherTimer, on peut créer des interfaces audio-réactives efficaces, parfaites pour les applications musicales, interactives ou pédagogiques.

Stay Tuned !