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.

https://github.com/roubachof/Sharpnado.Shadows

https://github.com/roubachof/Sharpnado.Shadows

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:Shadows.Shades>
                            <shades:ImmutableShades>
                                <shades:Shade x:Name="LightShade"
                                        BlurRadius="10"
                                          Opacity="1"
                                          Offset="-10,-10"
                                          Color="White" />
                                <shades:Shade x:Name="DarkShade"
                                              BlurRadius="10"
                                          Opacity="1"
                                          Offset="6,6"
                                          Color="#19000000" />
                            </shades:ImmutableShades>
                        </shades:Shadows.Shades>
		<!--Something will be add here-->
  </shades:Shadows>

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

   <pancakeView:PancakeView 
                            WidthRequest="60"
                            CornerRadius="15" 
                            x:Name="PancakeView">
                            <pancakeView:PancakeView.BackgroundGradientStops>
                                <pancakeView:GradientStopCollection>
                                    <pancakeView:GradientStop Offset="0" x:Name="GradientOne"  />
                                    <pancakeView:GradientStop Offset="1" x:Name="GradientTwo"  />
                                </pancakeView:GradientStopCollection>
                            </pancakeView:PancakeView.BackgroundGradientStops>
                      
                        </pancakeView:PancakeView>

Keep an eye on GradientStopCollection

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

//CTOR  
public NeumorphicView()
        {
            InitializeComponent();
            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");
            if(!clicked)
            	await Task.WhenAll(
                	firstAnimationHolder.ColorTo(colorOne, colorTwo, c => GradientOne.Color = c, 200),
                	secondAnimationHolder.ColorTo(colorTwo, colorOne, c => GradientTwo.Color = c, 200));
            else
                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 

https://github.com/jm-parent/NeumorphicAnimation

One thought on “Neumorphic animation with Sharpnado.Shadows

  1. An impressive share! I have just forwarded this onto a co-worker who was doing a little research on this. And he actually bought me lunch because I found it for him… lol. So let me reword this…. Thank YOU for the meal!! But yeah, thanks for spending some time to discuss this matter here on your web site.

Leave a Reply

Your email address will not be published.