Mach mehr aus Animationen in Xamarin.Forms mit SkiaSharp

Vergiss built-in Animationen in Xamarin.Forms! SkiaSharp bringt mehr Bewegung in deine Xamarin.Forms App für anspruchsvollere Animationen.

Built-in Animationen in Xamarin.Forms

Die standardmässig eingesetzten visuellen Elemente von Xamarin.Forms beschränken uns auf einfache Geometrien wie Rechtecke mit abgerundeten Ecken. Komplexe Formen fügen wir daher oft als Bilder hinzu. Dies entpuppt sich in der Verwendung teilweise als unflexibel. Für Animationen bietet Xamarin.Forms die Klasse ViewExtensions an. Damit lassen sich einfache Effekte wie Verschieben, Skalieren, Rotieren oder Verblassen effizient umsetzen. Wer Formen mit mehr Freiheitsgraden (Spline, Bézier-Kurve) oder Effekte (Farbverlauf) animieren möchte, stösst mit ViewExtensions jedoch an deren Grenzen. Auch das Verwenden einer Film-Sequenz hilft da nicht weiter, weil der Benutzer mit dieser nicht interagieren kann. Die benötigte Datenmenge ist zudem gross, denn die grafischen Inhalte müssen für unterschiedliche Bildschirmgrössen aufbereitet werden.

Das bringt uns zu SkiaSharp. SkiaSharp bietet umfangreiche Animationswerkzeuge für Inhalte, die als Vektorgrafik beschrieben werden. Das Live-Rendering benötigt zur Laufzeit etwas mehr Rechenleistung als statische Bilder, dafür sind die Möglichkeiten umso vielfältiger.

Die Bibliothek SkiaSharp

SkiaSharp ist ein open-source 2D-Grafiksystem für .NET und derzeit als Version 2.8 via NuGet verfügbar. Sie basiert auf der Grafik-Bibliothek “Skia” von Google (skia.org) und ist auf allen Plattformen (Mobil, Server und Desktop) verfügbar.

In Xamarin.Forms binden wir SkiaSharp einfach als NuGet-Paket (skiasharp.views.forms) ein. Überall wo wir die Bibliotheken verwenden, fügen wir die using-Direktive mit den Namespaces SkiaSharp und SkiaSharp.View.Forms hinzu. Jetzt müssen wir nur noch ein neues Canvas (Leinwand) erstellen und schon können wir drauflos zeichnen.

Im Allgemeinen bietet SkiaSharp folgende Möglichkeiten:

• Zeichnen einfacher Geometrien (Kreise, Ovale, Rechtecke)
• Linien und Pfade (Strich-Eigenschaften, -Enden und Verbindungsstellen, sowie die Füllung geschlossener Pfade sind anpassbar)
• Kurven und Pfade (Komplexe Pfade mit leistungsfähigen Pfadfunktionen sind möglich)
• Text (Text wie die übrigen Pfade verwenden)
• SVG (Vektorbasierte Grafiken)
• Bitmaps (Bitmaps können geladen, gespeichert, angezeigt, erstellt, gezeichnet und animiert werden)
• Effekte (Lineare und zirkuläre Farbgradienten, Shader, Füllmethoden, Maskenfilter, Image-Filter, Farbfilter)

Animationen mit SkiaSharp in Xamarin.Forms im praktischen Beispiel

Schauen wir uns doch an einem Beispiel an, wie wir eine 2D-Animation in SkiaSharp dynamisch zeichnen. Dazu zeichnen wir einen Pythagoras-Baum, den wir mit wählbarer Rekursionstiefe animieren.

1. Als erstes fügen wir das NuGet-Paket hinzu:

   Install-Package SkiaSharp.Views.Forms -Version 2.80.2

2. Anschliessend müssen wir im XAML die richtigen Namespaces hinzufügen:

   xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"

3. Danach können wir ein neues Canvas hinzugefügen:

   <skia:SKCanvasView x:Name="canvasView" PaintSurface="OnCanvasViewPaintSurface"/>

4. Im CodeBehind fügen wir über die using-Direktive ebenfalls die nötigen Namespaces hinzu:

   using SkiaSharp; 
   using SkiaSharp.Views.Forms;

5. Damit wir einen Pfad zeichnen können, müssen wir erst ein SKPaint Objekt definieren. Dieses definiert die Attribute für Linie und Füllung:

   groundPaint = new SKPaint 
   {
       Style = SKPaintStyle.Stroke, 
       Color = Color.DarkGreen.ToSKColor(), 
       StrokeWidth = 50
   };

6. Beim Auslösen des Events «OnCanvasViewPaintSurface» zeichnen wir das Canvas neu:

   private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs e)

7. Über die Eventargumente können wir dabei auslesen, welche Grösse das Canvas auf dem Bildschirm einnimmt. Auf dem Canvas können wir dann zeichnen:

   SKImageInfo info = e.Info; 
   SKSurface surface = e.Surface; 
   SKCanvas canvas = surface.Canvas; 
   canvas.Clear(); 
   canvas.DrawLine(0, info.Height, info.Width, info.Height, groundPaint);

8. Den Event «OnCanvasViewPaintSurface» können wir manuell im CodeBehind triggern. Dafür rufen wir die Methode «canvasView.InvalidateSurface()» auf. Diese führen wir bei Bedarf einfach mit einer hoher Wiederholrate aus, damit eine flüssige Animation entsteht.

Das Projekt zur Animation des Pythagoras-Baums ist auf GitHub hier verfügbar. Sobald die Seite erscheint, startet ein Timer, der mit einer bestimmten Bildwiederholfrequenz die Grafik mit den aktuellen Einstellungen neu zeichnet.

Fazit

SkiaSharp bietet eine umfangreiche Palette an Werkzeugen. Damit erweitert es die grafischen Darstellungsmöglichkeiten in Xamarin.Forms um ein Vielfaches. Es lassen sich anspruchsvolle und animierte Controls erstellen, die dank Vektorgrafik ohne optische Qualitätseinbusse auf jedem Bildschirm perfekt skalieren. Wer sich bereits mit Vektorgrafiken auseinandergesetzt hat, fühlt sich in der Bibliothek zudem schnell sicher. Auch leistungsschwache Geräte sind heutzutage ausreichend performant, um Animationen wie den Pythagoras-Baum aus dem Beispiel flüssig darzustellen. Damit steht dem Einsatz von SkiaSharp nichts mehr im Weg! Viel Spass in der Anwendung!