Xamarin + SkiaSharp = Neomorfismo
Neomorfismo vem aparecendo em diversas artes conceituais, algumas vezes focadas em UI mobile. Quais ferramentas o Xamarin dispõe para utilizarmos, tal tendência, em nossas aplicações? Hoje vou demonstrar a implementação baseada no SkiaSharp.
Entendendo o Neomorfismo
Existem, hoje, varias ferramentas para o auxílio da criação de efeitos neomórficos. Um deles é o https://neumorphism.io/, que possibilita a visualização dos efeitos aplicados e ainda gera o estilo CSS.
O interessante é que o Xamarin Forms já possibilita a utilização de CSS, então essa ferramenta pode ser útil, em alguns casos, no desenvolvimento mobile.
Em poucas palavras, esse efeito tenta replicar o relevo criado por peças feitas em termoformagem à vácuo, criando uma espécie de integraçao do controle em relevo ao controle “Pai”.
O básico para replicar esse efeito é a aplicação de duas “sombras”, sendo a primeira mais clara que a cor de fundo, geralmente aplicada no canto superior esquerdo, e a segunda mais escura, geralmente aplicada no canto inferior direito.
Exemplo: (descaradamente roubado do post do thewissen.io 😜)
Aí que entra o SkiaSharp
O SkiaSharp nos fornece algumas ferramentas bem interessantes que possibilitam criação de sombras.
- SKImageFilter.CreateDropShadow
- SKMaskFilter.CreateBlur
Aplicamos esses filtros no SkPaint e, com isso, podemos aplicar em operações subsequentes do SkiaSharp.
Nao vou me aprofundar na criação das formas no SkiaSharp, caso tenha interesse nesse assunto eu possuo um outro post que fala detalhadamente como criar controles utilizando essa ferramenta.
Xamarin.Forms.NeoControls
Fiquei bem motivado em aplicar esse tipo de efeito no Xamarin Forms, por isso, acabei criando uma biblioteca de controles baseados em Neomorfismo.
Vamos pegar como exemplo um botão:
Aqui eu crio todo o path do controle e aplico as duas sombras (Light e Dark).
Criei uma extenção (ToSKDropShadow) para facilitar a criação da sombra.
Você pode conferir o código completo aqui:
Resultado?
Resolvi recriar uma UI feita pelo designer Amit kumar:
- Com animação de entrada
O repositório desse exemplo você encontra aqui:
