UI, Xamarin.Forms

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

Leave a Reply

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