XAMARIN.FORMS + SKIASHARP

O SkiaSharp é uma biblioteca de código aberto .NET feita sobre o Skia, e é desenvolvida e mantida por engenheiros da Xamarin. Continue lendo para aprender a criar animações incríveis em seu aplicativo para dispositivos móveis usando Xamarin.Forms e SkiaSharp.

Tenho muito prazer em compartilhar com você alguns dos meus tópicos favoritos em desenvolvimento de software: computação gráfica e aplicativos móveis. Eu me apaixonei por gráficos desde criança – adorei desenhar em papel e, quando meus pais me deram meu primeiro computador em casa, um incrível ZX Spectrum, fiquei completamente fascinado pela computação gráfica.

O SkiaSharp é uma biblioteca wrapper .NET de código-fonte aberto do mecanismo gráfico Skia e, em combinação com o Xamarin.Forms, que é uma excelente estrutura de desenvolvimento de aplicativos móveis em plataforma aberta, você pode dar uma nova vida aos seus aplicativos móveis.

Traduzido por: Adriano D’lucca [Repost Traduzido
Fonte: https://www.telerik.com/blogs/xamarinforms-skiasharp-create-awesome-cross-platform-animations-in-your-mobile-ap

Skia, o artista estrela

O Skia é um mecanismo de gráficos 2D de alto desempenho de código aberto escrito em C ++. É criado e apoiado pelo Google. Como prova de seu sólido desempenho, ele tem sido usado em vários produtos tradicionais, como o Google Chrome, o Chrome OS, o Android ou o Mozilla FireFox, só para citar alguns. O repositório do Skia pode ser encontrado aqui: https://github.com/google/skia

O Skia tem versões de bibliotecas nativas para Android, iOS, Mac, Windows e ChromeOS.

O que você esperaria de um mecanismo gráfico 2D, o Skia tem API para desenhar gráficos primitivos, como texto, geometrias e imagens. Ele tem uma API de modo de renderização imediata, portanto, para cada chamada feita com a API do Skia, ela será desenhada rapidamente na tela.

SkiaSharp

O SkiaSharp é uma biblioteca wrapper do .NET feita sobre o Skia do Google,  desenvolvido e mantido por engenheiros da Xamarin e, é claro, é completamente open source sob a licença do MIT. Você pode verificar seu repositório de código-fonte no Github: https://github.com/mono/SkiaSharp

Em plataformas que não são Windows, o SkiaSharp é executado em cima do Xamarin e, como em qualquer biblioteca .NET, a maneira mais fácil de adicionar o SkiaSharp aos seus projetos é o NuGet: https://www.nuget.org/packages/SkiaSharp

SkiaSharp Canvas View

Para realmente ver na tela o que você desenha com a API SkiaSharp, o SkiaSharp fornece um controle de tela em todas as plataformas suportadas. Isso é feito pelo SkiaSharp.Views, uma biblioteca de extensões localizada no topo do SkiaSharp: https://www.nuget.org/packages/SkiaSharp.Views.Forms .

Aqui estão alguns exemplos do controle nativo da tela, que o SkiaSharp fornece em algumas plataformas:

Como você sabe, o Xamarin.Forms tem sua própria API e controles de plataforma cruzada envolvendo as APIs e controles nativos. Portanto, para aplicativos Xamarin.Forms, o SkiaSharp possui uma biblioteca dedicada chamada SkiaSharp.Views.Forms: https://www.nuget.org/packages/SkiaSharp.Views.Forms

SkiaSharp.Views.Forms fornece um controle Xamarin.Forms para a tela, o SkCanvasView:

 

Sob o capô, os renderizadores Xamarin.Forms SKCanvasView usam as mesmas visualizações nativas que compartilham a mesma implementação SkiaSharp.Views

Desenhando na tela do SkiaSharp

Como você pode ver acima, em todas as plataformas, o evento SkiCanvasView tem um PaintSurface. Ele aciona o evento quando a tela precisa ser pintada, porque a view foi redimensionada ou porque você chamou o método InvalidateSurface():

No manipulador de eventos, você obtém uma instância de SkiCanvas, que você pode usar para desenhar com a API SkiaSharp:

 

Eu acho impressionante ver como a combinação de Xamarin, Xamarin.Forms e SkiaSharp traz o .NET e o Skia juntos em tantas plataformas diferentes e fornece uma API .NET multiplataforma para desenvolvimento de aplicativos móveis e o Skia!

Este artigo fala sobre o uso de Xamarin.Forms e SkiaSharp, então o que você vai ler logo em sequência usa o SkCanvasView da biblioteca SkiaSharp.Views.Forms.

Implementando um destaque animado em um aplicativo móvel com Xamarin.Forms e SkiaSharp

Como exemplo, mostrarei como construir um destaque que se move entre as entradas e um botão em um formulário de inscrição, criando um efeito de animação cativante. O aplicativo é construído com Xamarin.Forms, Skia.Sharp e C #, que é executado perfeitamente no Android e no iOS. Aqui está uma captura de tela do aplicativo final em execução no simulador do iOS:

Você pode conferir o código-fonte completo do aplicativo no meu repositório no GitHub: https://github.com/andreinitescu/AnimatedHighlightApp

A implementação é em C# e é 100% compartilhada entre as plataformas – não há nenhum código personalizado específico da plataforma envolvido, nenhum renderizador Xamarin.Forms e nenhum efeito foi usado. Eu não testei em outras plataformas suportadas pelo Xamarin.Forms e pelo SkiaSharp, mas tenho certeza que o código roda muito bem com isso também.

O crédito vai para as seguintes fontes e seus autores pela ideia do design de animação:

Implementando o destaque

O efeito de destaque é criado por uma combinação de desenhar um caminho geométrico com a API SkiaSharp e animar a parte visível do caminho usando a API de animação Xamarin.Forms. Aqui estão os principais passos que segui na minha implementação:

  1. Criar o layout do formulário de inscrição
  2. Construir e desenhar SkPath no SkCanvasView com base na posição dos elementos de formulário no layout do contêiner
  3. Fazendo uma parte do SkPath visível usando o efeito de traço
  4. Animando o destaque entre os elementos

Criar o layout do formulário de inscrição

O formulário de inscrição tem três elementos Entry para inserir nome de usuário, senha e senha de confirmação e um Button para enviar. Eu estou usando um StackLayout como o recipiente para os elementos de formulário, mas qualquer outro contêiner funcionaria:

Crie e desenhe o SkPath no SkCanvasView com base na posição dos elementos do formulário no layout do contêiner

A linha realística é um caminho geométrico desenhado usando a API SkiaSharp. Usando a posição de cada elemento Xamarin.Forms no layout do formulário, estou criando uma conexão SkPath de todos os elementos do formulário e, em seguida, desenhando o SkPath criado na exibição SKCanvasView. Veja como o SkPath completo se  parece:

COMPLE~1

Para facilitar a implementação, é importante que a tela superior esquerda SKCanvasView  seja coordenada com o layout  StackLayout do formulário. Isso facilita o cálculo da conversão entre a posição do elemento Xamarin.Forms dentro  da posição StackLayout,  para o SkiaSharp usado para desenhar o SkPath no SKCanvasView. Aqui está o XAML, que mostra o SkCanvasView e o layout formulário envolto em um Grid :

 

A criação do SkPath baseado na posição dos elementos Xamarin.Forms é implementada no método  CreatePathHighlightInfo aqui .

Tornando Certa Parte do SkPath Visível Usando o Efeito Dash Path

Quando um elemento recebe foco, eu deixo visível apenas a parte do SkPath que deve representar o destaque do elemento focalizado:

DASH_P~1

Isso é feito criando um efeito de caminho de traço ( SkPathEffect) e pintando com ele o SkPath:

Como você pode ver, a API CreatesDash usa uma matriz de intervalo e uma fase .

O intervals é uma matriz de valores flutuantes que indicam o comprimento do intervalo “on” e o comprimento do intervalo “off” . Por exemplo, um array de intervalos com elementos 10, 5 definidos em um caminho de linha, cria o efeito de ver 10 pixels seguido por um intervalo de 5 pixels (supondo que a largura do traçado seja 1 pixel) e essa sucessão se repete ao longo do caminho:

DASH_I~1

A regra para essa matriz de intervalos é que a matriz deve conter pelo menos dois valores e deve ser de um número par de valores, e os valores são interpretados como uma sucessão de intervalos “ativados” e “desativados”.

O valor phase  representa o deslocamento usado para desenhar o início do traço. Por exemplo, se tivermos um intervalo de 10, 5 e a fase for 5, veremos algo como o seguinte:

DASH_I ~ 2

Para destacar o primeiro Entry por exemplo, o intervalo “on” é a largura do intervalo Entry, o “off” é o comprimento restante do caminho, e a fase é zero.

Há mais para saber sobre como a largura e a espessura do traço influenciam o caminho, sobre o qual você pode ler na excelente documentação Xamarin para Skia.Sharp aqui .

Como parte da criação do caminho para o destaque, além de construir o SkPath, também construo uma matriz de traços representando os intervalos do caminho do traço correspondentes ao destaque de cada elemento Entry e Button:

DASH_F ~ 1

Estou usando a posição do elemento no layout do formulário como uma chave para saber como obter o traço com base no elemento focalizado.

Tenho três elementos Entry e um Button. A lista de traços conterá quatro entradas representando os valores de traço, o que torna o caminho visível quando todos os elementos tiverem foco. Aqui está uma captura de tela com os valores do traço do depurador:

DASH_F ~ 2

Animando o destaque entre os elementos

Para fazer com que o destaque apareça como se estivesse se movendo entre os elementos de formulário, animo os valores de traço (intervalos e fase), dos valores de traço atuais para os valores de traço pré-calculados correspondentes ao elemento que deve mostrar realce.

Comecei criando minha própria  classe StrokeDashAnimation, que encapsula a animação do traço intervalse dos valores  phase do traço :

Estou usando a classe StrokeDash para encapsular o valor de traço atual, que tem os intervalos e as propriedades de fase atualizados separadamente por cada animação.

Se você não trabalhou com animações no Xamarin.Forms, o framework tem um suporte muito simples, mas muito poderoso, para criar animações baseadas na animação de um valor double.

A maneira como as Animation funcionam é muito simples: você atribui um valor double inicial , um valor double final e um tipo de atenuação. Animationusa atenuação para calcular o valor interpolado entre os valores inicial e final. Uma vez iniciado o uso do método Commit, uma instância Animation chamará seu retorno de chamada para cada valor computado, começando com o valor inicial fornecido até que o valor final seja atingido.

Animationpode manter outras instâncias Animation e quando você inicia a animação pai, ele inicia suas animações filho.

Você pode ler mais sobre a animação Xamarin.Forms e seus recursos aqui: https://docs.microsoft.com/pt-br/xamarin/xamarin-forms/user-interface/animation/

Na minha implementação, eu crio uma animação contendo três animações internas para cada propriedade do traço do traçado: intervalo “on”, intervalo “off” e fase:

Quando o foco muda para um Entryou Button clicado, inicio a animação animando a partir dos valores de traço atuais para os valores de traço pré-calculados:

Para cada novo valor de traço computado, eu invalido a superfície SkCanvasView para ativar o evento PaintSurface. No manipulador de eventos de pintura, desenho o caminho com os novos valores de traço mantidos por :_highlightState.StrokeDash

Palavras finais

Espero que você possa ver o potencial de combinar as duas incríveis APIs de plataforma cruzada, Xamarin.Forms e SkiaSharp. Ambos os frameworks possuem APIs multi-plataforma fáceis e poderosas de usar, e não existiriam sem estarem apoiados nos ombros do gigante: Xamarin.

Espero que tenha gostado de ler este artigo. Se tiver alguma dúvida ou comentário, sinta-se à vontade para entrar em contato comigo no Twitter ou no meu blog.

Para mais sobre o desenvolvimento com Xamarin

Quer aprender sobre como criar ótimas interfaces de usuário com o Xamarin? Confira o  Telerik UI para Xamarin, com tudo desde grades e gráficos até calendários e medidores.

Traduzido por: Adriano D’lucca [Repost Traduzido]
Fonte: https://www.telerik.com/blogs/xamarinforms-skiasharp-create-awesome-cross-platform-animations-in-your-mobile-ap

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *