Animations make your app visually appealing, easier to use, and more engaging. Animations however are not limited to only traditional Xamarin development; you can add beautiful animations to Xamarin.Forms. In this session, you will learn the core concepts of when to use animations in a mobile app and explore several different frameworks used to create them. When to properly use animations to provide visual feedback, supply context around UI elements, and call attention to app status changes will be explored. Then you’ll learn how to make your app come to life using the built-in Xamarin.Forms animation APIs, SkiaSharp, and the new Lottie animation framework from Airbnb. After this session, you’ll be equipped to create Xamarin.Forms apps that will stand out with animations.

1. @codemillmatt
@codemillmatt codemilltech.com
SR CLOUD DEVELOPER ADVOCATE - MICROSOFT
Matthew Soucoup
Animating Xamarin.Forms

2. @codemillmatt
Who is this guy?
Matt Soucoup
matt.soucoup@microsoft.com
@codemillmatt codemilltech.com

3. @codemillmatt
Who is this guy?
Matt Soucoup
matt.soucoup@microsoft.com
@codemillmatt codemilltech.com

4. @codemillmatt
Who is this guy?
Matt Soucoup
matt.soucoup@microsoft.com
@codemillmatt codemilltech.com

5. @codemillmatt
Why Animate?

6. @codemillmatt
Highlight

7. @codemillmatt
Distract

8. @codemillmatt
Guide

9. @codemillmatt
Delight

10. @codemillmatt
What is Xamarin?

11. @codemillmatt
Shared Application Logic

12. @codemillmatt
Native Platforms

13. @codemillmatt
Native Platforms

14. @codemillmatt
Native Platforms

15. @codemillmatt
App Logic Across All Platforms

16. @codemillmatt
What is Xamarin.Forms?

17. @codemillmatt
Shared UI Across All Platforms

18. @codemillmatt
Shared UI & Logic Across All Platforms

19. @codemillmatt
Common UI Elements

20. @codemillmatt
The Keys To Animation With Xamarin.Forms

21. @codemillmatt
When to animateWhere to animateHow to animate
3 Keys to Xamarin.Forms Animation

22. @codemillmatt
LottieSkiaSharp
Built-in
Xamarin.Forms
framework
How to Animate

23. @codemillmatt
Where to Animate

24. @codemillmatt
When to Animate – Navigation & Context

25. @codemillmatt
When to Navigate – Visual Feedback

26. @codemillmatt
When to Animate – System Status

27. @codemillmatt
LottieSkiaSharpBuilt-in Forms
System StatusVisual Feedback
Navigation &
Context
Agenda

28. @codemillmatt
Navigation and Context
BUILT-IN ANIMATION API

29. @codemillmatt
Functional change
App state and
navigation change
Describe how
objects interact
Navigation and Context Animations

30. @codemillmatt
Object Interaction

31. @codemillmatt
Application State

32. @codemillmatt
Functional Change

33. @codemillmatt
FadeRotate
ScaleTranslation
Built-In Animations

34. @codemillmatt
Translation

35. @codemillmatt
Translation

36. @codemillmatt
Scale

37. @codemillmatt
Scale

38. @codemillmatt
Rotate

39. @codemillmatt
Rotate

40. @codemillmatt
Fade

41. @codemillmatt
Fade

42. @codemillmatt
Can compose or
compound several
Asynchronous
Easing functions
provided
Extension
methods
On all View
subclasses
Xamarin.Forms Animation API

43. @codemillmatt
IN ACTION

44. @codemillmatt
Work on all Views4 animation types built-in
Functional changeContext change
Recap

45. @codemillmatt
Built-in Xamarin.Forms
animation APIs
Navigation, context, and
functional animations
Recap

46. @codemillmatt
Visual Feedback
SKIASHARP

47. @codemillmatt
Visualize result of actionSense of direct manipulation
Visual Feedback

48. @codemillmatt
Direct Manipulation

49. @codemillmatt
Result of Action

50. @codemillmatt

51. @codemillmatt
NuGetCross-platform
Open source2D drawing framework
SkiaSharp

52. @codemillmatt
TextBitmapsDraw
What Can It Do?

53. @codemillmatt
SkiaSharp Can… Draw

54. @codemillmatt
SkiaSharp Can… Draw

55. @codemillmatt
SkiaSharp Can… Draw

56. @codemillmatt
SkiaSharp Can… Draw

57. @codemillmatt
SkiaSharp Can… Bitmaps
BMP

58. @codemillmatt
SkiaSharp Can… Text

59. @codemillmatt
Skia Basics - SKCanvas

60. @codemillmatt
Skia Basics - SKPaint

61. @codemillmatt
Skia Basics - SKPath

62. @codemillmatt
Skia Basics - Drawing

63. @codemillmatt
Skia Basics - Animation

64. @codemillmatt
IN ACTION

65. @codemillmatt
2D drawing and animationSkiaSharp
Visual feedbackDirect manipulation
Recap

66. @codemillmatt
SkiaSharp
Direct manipulation and visual
feedback
Recap

67. @codemillmatt
System Status
LOTTIE

68. @codemillmatt
Indicate App is Processing

69. @codemillmatt
External Feedback

70. @codemillmatt
Internal Status

71. @codemillmatt

72. @codemillmatt
Using Lottie
After
Effects
Bodymovin
JSON
Use as an
image

73. @codemillmatt
IN ACTION

74. @codemillmatt
Lottie
Expanded
animations
System status
Recap

75. @codemillmatt
System statusVisual feedback
Navigation &
context
Animation Use Cases

76. @codemillmatt
LottieSkiaSharp
Xamarin.Forms
animation API
Animation in Xamarin.Forms

77. @codemillmatt
Delighted Users

78. @codemillmatt
Learn More!
Pluralsight: Moving Beyond the Basics with Xamarin.Forms
https://www.pluralsight.com/courses/xamarin-forms-moving-beyond-basics

79. @codemillmatt
Where to Find Stuff
Code and Slides:
github.com/codemillmatt/forms-animations/
Matt Soucoup – Sr. Cloud Developer Advocate @ Microsoft
@codemillmatt - matt.soucoup@microsoft.com - codemilltech.com

80. @codemillmatt
@codemillmatt codemilltech.com
SR CLOUD DEVELOPER ADVOCATE - MICROSOFT
Matthew Soucoup
Animating Xamarin.Forms