https://github.com/codemillmatt/forms-animations
Slides and code for mobile era talk
https://github.com/codemillmatt/forms-animations
Last synced: 2 months ago
JSON representation
Slides and code for mobile era talk
- Host: GitHub
- URL: https://github.com/codemillmatt/forms-animations
- Owner: codemillmatt
- Created: 2017-08-14T10:09:40.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-06-12T02:00:40.000Z (almost 4 years ago)
- Last Synced: 2025-01-21T07:27:42.242Z (4 months ago)
- Language: C#
- Size: 1.09 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Animating Xamarin.Forms
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.
## Slides
[You can find them here](https://www.slideshare.net/MatthewSoucoup)
## Demos
### Built-in Xamarin.Forms Animation APIs
In this demo we looked at the basics of the built-in Xamarin.Forms animation framework. We explored how to move any type of `View` around, including complex `ContentView`s that are composed of several other controls.
We also looked at `Easing` functions, or functions that control _how_ the view animates on the screen.
### SkiaSharp
This demo showed how to animate using SkiaSharp 2D drawing framework. The key here is to call the `SKCanvas` invalidate funcation then clear what is on the screen and then repaint whatever you need to in such a way that it is just a bit differently - thus appearing as an animation.
### Lottie
Lottie is a framework from Airbnb used to display animations created in After Effects within a mobile app. Thanks to the work of [Martijn van Dijk](https://github.com/martijn00/LottieXamarin) the use of Lottie within a Xamarin.Forms project is as simple as using an image.
## References
### Research
* [Built-in Xamarin.Forms Animation Overview](https://developer.xamarin.com/guides/xamarin-forms/user-interface/animation/simple/)
* [SkiaSharp in Xamarin.Forms](https://developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp/)
* [Petzhold on SkiaSharp](https://channel9.msdn.com/Events/Xamarin/Xamarin-University-Presents-Webinar-Series/SkiaSharp-Graphics-for-XamarinForms)
* [Google Material Motion](https://material.io/guidelines/motion/material-motion.html#)
* [Improving Mobile App Experience with Animations](https://www.shopify.com/partners/blog/using-animation-to-improve-mobile-app-user-experience)
* [UX Design with Animations](https://uxplanet.org/animation-in-mobile-ux-design-93263dc6c5f4)
### Slide Images
* Lyft app
* 1Password app
* Shazam app
* Google Calendar app
* Gmail app
* Twitter app
* [Google material motion images](https://material.io/guidelines/motion/material-motion.html#)