Animations, XamarinForms

Plug and play animations in Xamarin Forms

6 Comments

Animations are important when developing a mobile app, it can make any boring application into a super fun one.

Xamarin Forms makes it really easy to work with animations in the code behind but what if we want to create some simple animations that we can add to any control in a very easy way. In this article, I’m going to show you just that “Plug and play animations”, which basically are predefined animations that you can add to any view with just 2 lines of code.

How to use it

1-Add your view, for example an image:

2-Add the animation behaviour to the view

And that’s all!!

If you see the new behavior added, it has a property called AnimationType, in this property you can set 6 types of animations:

  • Fade
  •  FlipHorizontal
  • FlipVertical
  •  Rotate
PDT: It does a 360 rotation, but you won’t be able to appreciate it via a Gif
  •  Scale

  • Shake

This behavior can be applied to any of these views: Labels, Layouts, Switchs, Image, Button and BoxView.

So, what about the Entry? For the entry I created a different behavior which basically will shake if the text introduced is wrong.

How to use it

1-Add the behavior to your entry

2-Shake it

As you can see in the behavior added there is a command called Shake. So every time you want the entry to shake, you just have to call it.

And the behavior will shake it for you.

ViewModel code here.

How I do it

The code is pretty simple, basically two behaviors one for general views and another for entries. For both of them created a command which basically will be raised after the animation is executed.

You can grab the code for both behaviors here:

And that’s all!! You can check the full source code here.


Improvement

* Adding generic animation for the rest of Xamarin Controls available

* Adding custom properties to the behavior so that we can do some animation customization


Reference

In case you want to collaborate, go ahead and make a pull to request! Let’s create some fun animations! 🙂

Happy coding!

You may also like

6 Comments

  1. Hi,
    Thanks for this, I’ve been playing around with animations as well, specifically as a view loads up.

    Have you tried not using await and adjusting the timings so that some of the animations run in parallel? You end up with more natural movements that way.

    You can see the effect in this Tweet. https://twitter.com/stevehurcombe/status/1095622088998772736?s=20

    I achieved that by not “await”-ing the translations (notice the different timings too). The underscore is the C# discard operator (gets rid of the Visual Studio warnings):

    _ = gridGoal.FadeTo(1, 10);
    _ = gridGoal.ScaleTo(1.0, 500, Easing.SinOut);
    _ = stripeNotes.TranslateTo(0, 0, 800, Easing.SinOut);
    _ = stripeItems.TranslateTo(0, 0, 900, Easing.SinOut);
    _ = stripeStarred.TranslateTo(0, 0, 950, Easing.SinOut);
    _ = stripeHelpers.TranslateTo(0, 0, 1050, Easing.SinOut);

    Thanks for all your articles!

  4. Hi Charlin! Nice post.

    Is it possible to create a property in view model (ex: ButtonBackColor) and bind this property to ViewTappedButtonBehavior ?

    I tried, but it didn’t work.

    Thanks in advance.