Those of you know me (or have visited my blog) know that I love playing around with Xamarin.Forms Layouts. Recently, Matt Soucoup was on the Xamarin Show talking about Animations. He showed how easy it is to do simple animations in Xamarin Forms. Personally, I don’t think developers do enough with animations – they can really spice up your UI and show your users how much you care.
I thought it might be fun to use some of the stuff that Matt was talking about and put it into a more real world context.
I also came across an excellent blog post Build awesome animations with 7 lines of code using ConstraintLayout which is great if you are doing Android development. So just for giggles, I thought I might reproduce that animations in Xamarin Forms – It took slightly more than 7 lines, but having said that, it also works cross platform.
The animation itself, is very simple and looks a lot like this:
and on iOS, like this:
So how do we go about doing something like that?
The Page Layout
Nothing too exciting happening here. Just a ContentPage with a grid inside with a few overlapped elements. I’ve made put each element that will be animated into a ContentView so that I can move all it’s sub elements by just controlling the animations on the ContentViews. There is also a GestureRecognizer on the Image which is actually going to trigger the animations.
As an aside, I used grids to lay this out (because I loves me some grids), but if you were a fan of AbsoluteLayout you could probably achieve the same result with that.
The Animation Logic
We can achieve the results we are after with just some very simple inbuilt Xamarin.Forms animations, specifically we use:
- LayoutTo to adjust the bounds of the Image (to make it expand and shrink)
- TranslateTo to slide elements around
- FadeTo to fade opacity values
Throw in some Easing on those animations to provide a nice spring effect and we are in business. Here is the code that does the animation:
The only other bit of significant logic (and it’s not that significant) is just starting all the elements in their correct starting positions. I’ve done this on the OnSizeAllocated because then we can also handle positioning things in the correct locations on a rotation of the device. Again the code is super simple:
You can achieve some pretty nice stuff with the inbuilt Xamarin.Forms animation api’s. And really this is just scratching the surface. My layout here could be much nicer with some attention to details on fonts and margins – but really I just wanted to focus in on the animations. So people, go out and add some animations to your pages!!!
- Build awesome animations with 7 lines of code using ConstraintLayout – This is a really cool technique for Android (and also the layout I blatantly copied).
- Animating Xamarin.Froms Lightning Lecture at Xamarin University – Glenn Stephens covers off Animation in this Lightning Lecture.
- Xamarin Show talking about Animations. Matt Soucoup gives a quick rundown of animation in Xamarin.Forms
Oh yeah, I almost forgot, you can go find the code over at my GitHub here.
Until next time, happy coding!