Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

JÖRG NEUMANN THEMEN ▪ Mobility, UX, Machine Learning ▪ UI-Technologien ▪ Consulting, Coaching, Training KONTAKT ▪ Mail: [email protected] ▪ Twitter: @JoergNeumann ▪ GitHub: https://github.com/JoergNeumann ▪ Blog: www.HeadWriteLine.BlogSpot.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

CROSS DEVICE CHALLENGES

Slide 5

Slide 5 text

CocosSharp ▪ 2D Gaming Engine SkiaSharp ▪ 2D-Graphics Rendering Library UrhoSharp ▪ 3D Gaming Engine CROSS-PLATFORM GRAPHICS RENDERING

Slide 6

Slide 6 text

CROSS PLATFORM UX ▪ SKIA Einheitliche 2D-Graphics API über alle Plattformen Open Source-Projekt von Google ▪ Plattform-Support iOS, Android, Mac, UWP, tvOS, Windows ▪ Features GPU Acceleration Basic 2D Graphic Operations Custom Effects & Shaders SVG Loading Image Manipulation ▪ SkiaSharp .NET-Port von Skia Integration in Xamarin.Forms, WPF, … Shapes Bézier Curves Translations & Rotations Text rendering Discrete Path Effects Composed Path Effects Sum Path Effects Shaders

Slide 7

Slide 7 text

Zeichnen mit SkiaSharp Möglichkeiten ▪ Zeichnen von einfachen Formen (Linien, Rechtecken, Ellipsen, ...) ▪ Individuelle Pfade ▪ Transformationen ▪ Farbverläufe, Anti-Aliasing API ▪ Android Graphics API ▪ Pfade orientieren sich am SVG-Modell Limitationen ▪ Keine Animations-API ▪ Keine direkte Interaktions-API protected override void OnPaintSurface( SKPaintSurfaceEventArgs e) { // Initialisierung var surface = e.Surface; var canvas = surface.Canvas; canvas.Clear(SKColors.White); // Transformation canvas.Scale(2); canvas.Translate(20, 20); using (var paint = new SKPaint()) { // Zeichenstil konfigurieren paint.IsAntialias = true; paint.Color = new SKColor(191, 197, 204); paint.Style = SKPaintStyle.Fill; paint.StrokeWidth = 1; // Kreis zeichnen canvas.DrawOval(10,10,10,10, paint); } } Zeichnen mit SkiaSharp

Slide 8

Slide 8 text

Zeichnen mit SkiaSharp Möglichkeiten ▪ Zeichnen von einfachen Formen (Linien, Rechtecken, Ellipsen, ...) ▪ Individuelle Pfade ▪ Transformationen ▪ Farbverläufe, Anti-Aliasing API ▪ Android Graphics API ▪ Pfade orientieren sich am SVG-Modell Limitationen ▪ Keine Animations-API ▪ Keine direkte Interaktions-API using (var paint = new SKPaint()) { // Pfad zeichen using (var path = new SKPath()) { path.MoveTo(50f, 60f); path.LineTo(100f, 60f); path.CubicTo(100f, 60f, 90f, 100f, 50f, 100f); path.Close(); canvas.DrawPath(path, paint); } // Linie zeichen canvas.DrawLine(50, 60, 50, 100, paint); // Rechteck zeichnen canvas.DrawRect(new SKRect(25f, 80f, 35f, 80f), paint); // Text rendern var text = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.Purple, TextSize = 20, }; var size = paint.MeasureText("Hallo"); canvas.DrawText("Hallo", (width / 2) - size, 20 + text.TextSize, text); } Pfade und Formen zeichnen

Slide 9

Slide 9 text

DEMO ZEICHNEN MIT SKIA SHARP

Slide 10

Slide 10 text

Technologie Container Hintergrund ▪ Für die unterschiedlichen Technologien (Xamarin.Forms, UWP, WPF, ...) werden spezielle View-Klassen bereitgestellt ▪ Kümmern sich um das Rendern des SkiaSharp-Codes ▪ Behandeln Interaktion mit der Oberfläche (Touch, Mouse, Keyboard, ...) SkiaSharp.Views.Forms. SKCanvasView Xamarin.Forms SkiaSharp.Views.WPF. SKElement WPF SkiaSharp.Views.Mac. SKCanvasView Xamarin.Mac SkiaSharp.Views.iOS. SKCanvasView Xamarin.iOS SkiaSharp.Views.UWP. SKXamlCanvas UWP SkiaSharp.Views.Android. SKCanvasView Xamarin.Android

Slide 11

Slide 11 text

Technologie Container Vorgehen ▪ Entsprechendes NuGet-Packages einbinden ▪ OnPaintSurface() zum Zeichnen überschreiben ▪ OnTouch() für Interaktion überschreiben (Xamarin.Forms) protected override void OnPaintSurface( SKPaintSurfaceEventArgs e) { var surface = e.Surface; var canvas = surface.Canvas; canvas.Clear(SKColors.White); … } Zeichnen protected override void OnTouch( SKTouchEventArgs e) { switch (e.ActionType) { case SKTouchAction.Pressed: … break; case SKTouchAction.Released: … break; } e.Handled = true; this.InvalidateSurface(); } Interaktion

Slide 12

Slide 12 text

CUSTOM CONTROLS Idee ▪ Controls nur einmal entwickeln und auf unterschiedlichen Plattformen / Technologien verwenden ▪ Keine plattformspezifischen Renderer mehr erforderlich!

Slide 13

Slide 13 text

CUSTOM CONTROLS Vorgehen ▪ Control leitet von der View der entsprechenden Technologie ab ▪ Die eigentliche Arbeit findet aber im plattformneutralem Code statt ▪ Interaktion und Animation wird von Plattform-View bereitgestellt MyControl SkiaSharp Control Library MyControl WPF Control Library MyControl XF Control Library MyControl UWP Control Library WPF App Xamarin.Forms App UWP App

Slide 14

Slide 14 text

DEMO CUSTOM CONTROLS MIT SKIA SHARP

Slide 15

Slide 15 text

DEVELOPER CHALLENGES

Slide 16

Slide 16 text

WORKFLOW ▪ Ziel Pixel-genaue Umsetzung des Style-Guide Möglichst große Wiederverwendung ▪ Herausforderungen Unterschiedliche APIs pro Plattform ▪ Tooling Im Vorfeld über Tooling verständigen DEVELOPMENT DESIGN

Slide 17

Slide 17 text

DESIGN TOOLS PaintCode ▪ Design Tool für Mac ▪ Generiert Code aus Designs (iOS, Android, Xamarin, SVG, ...) ▪ Auch als Sketch-Plug-In erhältlich ▪ Kommerzielles Produkt Produktseite

Slide 18

Slide 18 text

DESIGN TOOLS KIMONO DESIGNER ▪ SkiaSharp-basiertes Design Tool für Mac ▪ Generiert SkiaSharp-Code aus Designs ▪ Open Source-Projekt Sourcen auf GitHub / Tutorial

Slide 19

Slide 19 text

NÜTZLICHE LIBRARIES Lottie ▪ Mobile Animations Library ▪ Entwickelt von Airbnb für iOS & Android ▪ JSON-basierte Animationsdateien von Adobe After Effects abspielen ▪ Open Source-Projekt ▪ Freie Lottie-Animationen: www.lottiefiles.com Sourcen auf GitHub / Tutorial

Slide 20

Slide 20 text

MICROSOFT FLUENT DESIGN LANGUAGE

Slide 21

Slide 21 text

THE PLAYGROUND IS EXPANDING 2D 0D (NO SCREEN) 3D (NO SCREEN) SMALL 2D SCREENS LARGE 2D SCREENS L I G H T S O U N D L I G H T S O U ND H A P T I C L I G H T S O U N D G L A N C E A B L E S O U N D H A P T I C V I S U A L ( 0 ’ ) S O U N D H A P T I C V I S U A L ( 0 - 3 ’ ) S O U ND H A P T I C V I S U A L ( 0 ’ - 6 ’ ) S O U ND H A P T I C V I S U A L ( 3 ’ - 1 0 ’ ) S O U ND H A P T I C V I S U A L ( 0 ’ - 1 0 ’ ) S O U ND H A P T I C 2 D - 3 D ( 0 ’ - 1 2 ’ ) S O U ND H A P T I C I M M E R S I V E ( 0 ’ - X ’ ) S O U ND H A P T I C INPUTS OUTPUTS V I S U A L ( 0 - 3 ’ ) S O U ND H A P T I C V I S U A L ( 0 - 3 ’ ) S O U ND H A P T I C

Slide 22

Slide 22 text

Depth Motion Material Scale Light Fluent Design System

Slide 23

Slide 23 text

Light

Slide 24

Slide 24 text

REVEAL DEFINITION ▪ Reveal ist ein Lichteffekt ▪ States: Hoover, Pressed, …

Slide 25

Slide 25 text

REVEAL ANWENDUNG ▪ Ist in vielen Controls bereits enthalten (ListView, GridView, TreeView, NavigationView, CommandBar, ComboBox, …) ▪ Wird über Styles bereitgestellt (ButtonRevealStyle, ToggleButtonRevealStyle, RepeatButtonRevealStyle, …) ▪ Hintergrund des Containers festlegen: …

Slide 26

Slide 26 text

DEMO REVEAL

Slide 27

Slide 27 text

Depth

Slide 28

Slide 28 text

PARALLAX DEFINITION ▪ Scroll-Effekt bei dem ein Tiefeneffekt entsteht

Slide 29

Slide 29 text

PARALLAX VERWENDUNG ▪ ParallaxView-Element verwenden …

Slide 30

Slide 30 text

DEMO PARALLAX

Slide 31

Slide 31 text

Motion

Slide 32

Slide 32 text

CONNECTED ANIMATIONS DEFINITION ▪ Dienen zur Definition von Übergangseffekten während der Navigation ▪ Sehr gut zur Master-/ Detail-Navigation

Slide 33

Slide 33 text

CONNECTED ANIMATIONS ANWENDUNG ▪ Source und Destination definieren ▪ ConnectedAnimationService-Klasse private void SourceImage_PointerPressed(object sender, PointerRoutedEventArgs e) { var image = sender as Image; ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("image", image); Frame.Navigate(typeof(DetailsPage)); } Source: protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); var imageAnimation = ConnectedAnimationService.GetForCurrentView().GetAnimation("image"); if (imageAnimation != null) { imageAnimation.TryStart(DestinationImage); } } Destination:

Slide 34

Slide 34 text

DEMO CONNECTED ANIMATIONS

Slide 35

Slide 35 text

Material

Slide 36

Slide 36 text

ACRYL DEFINITION ▪ Halbtransparentes Material ▪ Erzeugt Tiefe in der Oberfläche ▪ Empfohlen für Navigation, Commands, usw.

Slide 37

Slide 37 text

ACRYL ANWENDUNG ▪ Wird in Form eines Brush bereitgestellt ▪ Brush kann angepasst werden …

Slide 38

Slide 38 text

DEMO ACRYL

Slide 39

Slide 39 text

FAZIT ▪ Cross-Plattform UX ist eine Herausforderung ▪ SkiaSharp erleichtert die plattformübergreifende Entwicklung ▪ Ein guter Designer-/ Entwickler-Workflow ist essentiell für den Erfolg ▪ Code-Generatoren können helfen ▪ UWP enthält APIs und Ressourcen für eine gute UX

Slide 40

Slide 40 text

Q & A

Slide 41

Slide 41 text

FLUENT DESIGN SYSTEM – RESSOURCEN ▪ Fluent Design System Home ▪ https://developer.microsoft.com/en-us/windows/apps/design

Slide 42

Slide 42 text

SKIASHARP – TUTORIALS ▪ Cross Platform 2D Drawing with SkiaSharp ▪ https://developer.xamarin.com/guides/cross-platform/drawing/ ▪ An Introduction to SkiaSharp ▪ https://developer.xamarin.com/guides/cross-platform/drawing/introduction/ ▪ Deep Dive into SkiaSharp with Xamarin.Forms ▪ https://blog.xamarin.com/deep-dive-skiasharp-xamarin-forms/ ▪ Using SkiaSharp in Xamarin.Forms ▪ https://developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp/

Slide 43

Slide 43 text

DOCUMENTATION ▪ Samples & Demos ▪ https://developer.xamarin.com/SkiaSharpFormsDemos/ ▪ SkiaSharp API Documentation ▪ https://developer.xamarin.com/api/root/SkiaSharp/ ▪ Google Skia Documentation ▪ https://skia.org/

Slide 44

Slide 44 text

SOURCES AND APIS ▪ SkiaSharp auf GitHub ▪ https://github.com/mono/SkiaSharp ▪ Erweiterungen für SkiaSharp ▪ https://github.com/mono/SkiaSharp.Extended

Slide 45

Slide 45 text

TOOLS ▪ Kimono Designer ▪ https://github.com/xamarin/KimonoDesigner ▪ Paint Code ▪ https://www.paintcodeapp.com/ ▪ PaintCode2Skia - Convert PaintCode Export to SkiaSharp ▪ https://github.com/michaldobrodenka/PaintCode2Skia