O X do Xamarin Forms — Lottie parte 2 : Resources, EmbeddedResource e SplashScreen
Fala galera,
Tudo beleza?
A quase 3 anos atras ( faz tempo em!!!) eu fiz um artigo bem bacana sobre o Lottie (O X do Xamarin Forms — Lottie). Embora ate a parte de configuração tenha mudado a forma de utilização do Pacote é a mesma.. a mesma mas com coisas novas interessantes!
Então vamos para uma parte 2 adicionando mais alguns exemplos de utilização do Nosso querido Lottie!
Bora?
Warning : Antes de mais nada sugiro que você leia a Parte 1 a única diferença é que não precisa mais da inicialização por plataforma .
Vamos ao Lottie
Novos Resources
Se você igual eu para designer só consegue desenhar um boneco palito, provavelmente vai ter problemas para usar o Adobe After Effects para criar seus templates. Bem tenho uma solução boa para isso, o site LottieFiles tem arquivos gratuitos e pagos para Lottie e ainda por cima conta com uma ferramenta incrível para customizar as animações :
EmbeddedResource
Na parte 1 eu expliquei como adicionar o arquivo do Lottie por plataforma. Agora é possível adicionar o arquivo de outras formas, uma delas é através de EmbeddedResource. Ou seja, podemos adicionar o arquivo json apenas no projeto compartilhado.
Após o Lottie instalado vamos adicionar o arquivo no projeto compartilhado e configurar o BuildAction como EmbeddedResource:
Agora na Pagina que queremos utilizar o Lottie vamos adicionar o controle com EmbeddedResource :
Simples :
Splash Screen
É possível utilizar utilizar as animações do Lottie na Splash Screen do iOS e do Android.
Warning : Se você não conhece sobre Splash Screen de iOS e Android esse artigo pode te ajudar : O X do Xamarin Forms — Splash Screen
Antes de partirmos para as plataformas é bom lembrar que sim, nesse caso vamos precisar dos arquivos por plataforma. do iOS pode ser na Raiz do projeto e no Android na pasta Assets. (No final do Artigo vai ter um projeto de exemplo)
Outro ponto, existem diversas formas de fazer mas eu achei essa simples (inclusive utilizo ela ,Referencia original Clique aqui) e atende bem :)
iOS:
Primeiro passo adicionar o arquivo :
Agora vamos criar um iOSView Controller no Projeto iOS (Obviamente :P) para efetuar a animação :
Esse tipo de classe ja vai criar o Controller e o xib. No Controller vamos implementar o Código :
No LOTAnimationView.AnimationNamed(“loading_circle”); você define qual a animação que sera executada.
Agora vamos implementar no AppDelegate.cs a chamada :
Por fim caso precise, uma alterada na scene do LaunchScreen.storyboard:
Agora é só rodar :
Android:
Primeiro passo adicionar o arquivo :
Agora vamos criar o layout Activity_Splash.xml :
Em seguida vamos criar nosso tema no arquivo styles.xml :
vamos adicionar nossa nova cor no colors.xml :
E por fim nossa SplashActivity.cs :
Lembrando que com deixamos o MainLauncher = true aqui na MainActivity devemos deixar como false.
Rodando :
Bacana em?
Se quiser pode baixar o exemplo clicando aqui.
Quer ver outros artigos sobre Xamarin ? Clique aqui.
Espero ter ajudado!
Aquele abraço!
