(616) 371-1037

[email protected]

Xamarin.Forms Fancy Animations

April 19, 2018 - Yuriy Holembyovskyy

7 Comments

Xamarin.Forms includes its own animation infrastructure that allows for easy creation of simple animations, while also being versatile enough to create complex animations. Let’s take a look how we can reproduce some popular animations with Xamarin.Forms built-in infrastructure.

The first animation that I want to reproduce is the nice entry shaking animation on the macOS X lock screen when you enter an incorrect password.

Shake Animation

The following code example demonstrates the TranslateTo method to reproduce the shake animation:

Lets take a look what we get with this code. The following video shows shaking on each platform:

Flip Animation

Another often used animation is the flip animation. During it we can replace images, colors or even controls. We can achieve this with 3 steps:

  1. Rotate the control to 90 (-90 for Right to Left) degrees so it the width becomes zero pixels
  2. Replace it with the other control previously rotated to 270 (-270)
  3. Rotate the new control to 360 (-360) and setup the rotation to 0.

I will flip one button replacing it with another button with a different background color.  To reproduce the flip animation we will use RotateYTo method:

Here we go

Let’s take a look at what we got

 

Nice, but to me it looks very “linear”. That’s because we have skipped the additional parameter called “easing function”. Omitting the third parameter when creating an animation causes the animation to use the default Linear easing function, which produces a linear velocity. Let’s make it more fancy with smooth accelerations. For this we will pass the easing functions: Easing.SpringIn and Easing.SpringOut.

Let’s take a look what we got now after minor changes:

Collapse/Expand animation

The last example that I want to show you is the Collapse/Expand animation that is often used in different types of accordion controls. Let’s take a look how we can achieve this with LayoutTo function. We will collapse the control’s height (Y-axis) but you can easily collapse the width (X-axis).

Let’s take a look at our results

As you possibly have noticed we also got the “Arrow” rotating  and running simultaneously. This is called Composite Animations. Composite animations can be created by mixing awaited and non-awaited animations and using the Task.WhenAny and Task.WhenAll methods to run multiple asynchronous methods concurrently.

Wrapping Up

The examples in the blog demonstrate how easily with a few lines of code we can get nice smooth hardware-accelerated animations on 3 major platforms. Sample animations source code is available on github.

Yuriy Holembyovskyy

7 thoughts on “Xamarin.Forms Fancy Animations

  • XF_Learner

    November 10, 2018 at 12:26 pm

    Hi Yuriy, Thanks for sharing the detail. I am using 3rd animation solution to create a according view, i just replaced BoxView with Frame as shown below. But like BoxView Frame is not getting collapsed completely. Can you please guide me how to achieve accordian view with contents?

    <!—->

    Reply
    • Yuriy Holembyovskyy

      November 10, 2018 at 2:48 pm

      Sure. Can you share your code sample?

      Reply
      • XF_Learner

        November 10, 2018 at 9:07 pm

        Code is same as you shared on Github (FancyAnimations – LayoutPage.xaml) , I just replaced BoxView (line no 14 in LayoutPage.xaml) with below code. Other than this i did not change anything. LayoutPage.xaml.cs is also same as yours.

        I am testing it for UWP platform, though it is expanding/collapsing but Frame is not collapsing to height 0, i still see it under Header with some Height (~5-8). I want it to completely collapse/disappear. Want to implement same in ListView . Any suggestion will be helpful, I am completely new to XF and found it quite interesting.
        Once again thank you so much.

        Reply
        • XF_Learner

          November 10, 2018 at 9:15 pm

          Somehow XAML code is not appearing in comments, but instead of BoxView I used Frame like:
          Frame Name=MyContent HeightRequest=300
          ScrollView
          FlexLayout
          Label 1
          Label 2
          FlexLayout
          ScrollView
          Frame

          That’s the only XAML portion I am replacing in your code.

          Reply
  • Yuriy Holembyovskyy

    November 12, 2018 at 4:54 am

    I have replaced BoxView with Frame and labels inside it.
    And it has collapsed completely so I think problem is that you hadn’t removed some Margins or Paddings

    Reply
  • XF_Learner

    November 12, 2018 at 11:35 pm

    Hi Yuriy, Thank you so much for your time.
    Margin and Padding are already set to 0. I tested below three scenarios. Only first scenario using ScrollView is working fine on Windows UWP. So for now I can use ScrollView.
    Just sharing with you all three cases. Really appreciate that you spent time assisting me.

    Case 1 – Used ScrollView. Working fine on Android Emulator and Windows UWP

    ScrollView x:Name=MyContent HeightRequest=300 Padding=0 Margin=0 BackgroundColor=Yellow
    -FlexLayout Direction=Column” JustifyContent=SpaceEvenly
    –Label 1
    — Label 2
    –Image
    -FlexLayout
    ScrollView

    Case 2 – Used StackLayout. Working on Android Emulator and Windows UWP but even if Yellow expandable area collapse completely the first two Label still remains on the screen. Even if we put Image at first place, some portion of image still remains on screen.

    StackLayout x:Name=MyContent BackgroundColor=Yellow Padding=0 Margin=0 HeightRequest=300
    -ScrollView Padding=0 Margin=0 VerticalScrollBarVisibility=Never
    –StackLayout Padding=0 Margin=0
    —Label 1
    —Label 2
    —Image
    –StackLayout
    -ScrollView
    StackLayout

    Case 3 – Used Frame. Working fine on Android Emulator but on Windows UWP, Yellow Frame area not collapsed completely, Yellow expandable area still shows up (~height of 1-2 rows, sometimes even this height vary, sometimes one row, and sometimes two rows).

    Frame x:Name=MyContent BackgroundColor=Yellow HeightRequest=300 Margin=0 Padding=0 CornerRadius=0
    -ScrollView Margin=0″ Padding=0″
    –StackLayout Margin=0 Padding=0
    —Label 1
    —Label 2
    —Image
    –StackLayout
    -ScrollView
    Frame

    Reply
    • Yuriy Holembyovskyy

      November 13, 2018 at 3:46 am

      I am glad that you have found solution. Also there are ‘Spacing’ property for StackLayout and FlexLayout. You can try to play with it if you will need to replace Scrollview with these controls

      Reply

Leave a comment

Your email address will not be published. Required fields are marked *