Neumorphic animation with Sharpnado.Shadows

Oh oh oh , this is my first blog ( and not the last one 😀 ) ! Be indulgent 🙂

First of all , you can find the link to Sharpnado.Shadow below.

What is Sharpnado.Shadow :

Shadow is one of those nugets to have in all our Xamarin.forms project. ( Android , Ios , UWP & Tizen ).
If you want a easy way to add Shadow to any view , get it from Github or Nuget !

My goal is to reproduce the Neumorphic animation Convex <=> Concave.

Neumorphic designs in Flutter | LaptrinhX

( Psssst , that’s a secret but , it’s easier than you can imagine. )

Firstly , use Shadows.Shades to setup a view with Neumorphic design ( nothing new here , everything is the same as Sharpnado.Shadow )

  <shades:Shadows CornerRadius="40">
                                <shades:Shade x:Name="LightShade"
                                          Color="White" />
                                <shades:Shade x:Name="DarkShade"
                                          Color="#19000000" />
		<!--Something will be add here-->

Secondly , we can add our View. And what a view , this is a PancakeView !

                                    <pancakeView:GradientStop Offset="0" x:Name="GradientOne"  />
                                    <pancakeView:GradientStop Offset="1" x:Name="GradientTwo"  />

Keep an eye on GradientStopCollection

Xaml is ready ! Lets see the real trick in code behind.

public NeumorphicView()
            PancakeView.BackgroundGradientStartPoint = new Point(0,0);
            PancakeView.BackgroundGradientEndPoint = new Point(1, 1);
            GradientOne.Color = Color.FromHex("ffffff");
            GradientTwo.Color = Color.FromHex("d8d8db");
        private async void Animation()
            var colorOne = Color.FromHex("ffffff");
            var colorTwo = Color.FromHex("d8d8db");
            	await Task.WhenAll(
                	firstAnimationHolder.ColorTo(colorOne, colorTwo, c => GradientOne.Color = c, 200),
                	secondAnimationHolder.ColorTo(colorTwo, colorOne, c => GradientTwo.Color = c, 200));
                await Task.WhenAll(
                    firstAnimationHolder.ColorTo(colorTwo, colorOne, c => GradientOne.Color = c, 200),
                    secondAnimationHolder.ColorTo(colorOne,colorTwo , c => GradientTwo.Color = c, 200));
            clicked = !clicked;

As we can see here , neumorphic animation (convexe=>concav) is simply, animations of 2 gradients combined to 2 static shadows

We can do cool things with simple things

GitHub Logomark

To see the complete code structure you can enter to my Github repository

Leave a Reply

Your email address will not be published.