O X do Xamarin Forms — Lottie

3 min readJul 26, 2018

Fala galera!

Gifs são muito uteis para enviar memes na internet, mas também podem ser uteis para outras coisas xD. Quando falamos de animação estamos não podemos deixar de lembrar do Adobe After Effects, um software de videografismo e pós edição, mas muito útil para criar e exportar animações com json.

Ta mais , porque eu iria querer usar gifs na minha aplicação ? Vocês conhecem o app Airbnb ? Duvido muito que não xD . Então eles criaram o Lottie e esse conceito de animações bem legais, e deram um toque a mais ao APP.

Podemos utilizar essas animações em telas de carregamento, apresentação e etc.. como eu gosto de dizer sempre, o céu é o limite para criatividade xD

Certo, mas é possível utilizar Lottie com Xamarin ? e mais, é possível utilizar em Xamarin.Forms? A resposta é SIM!!!!

Tudo graças ao controle criado pelo Martijn van Dijk (Esse é um cara que você deveria conhecer) o LottieXamarin.

Agora vamos deixar de introdução e vamos colocar essas animações para rodar!

Configurando o controle

Vamos ao nuget e vamos instalar em nossos projetos o pacote Com.Airbnb.Xamarin.Forms.Lottie

Após a instalação o um exemplo é exibido da sua utilização :

Mas não precisa se preocupar com ele, vamos colocar a mão na massa e fazer nós mesmos :D

Existem algumas configurações adicionais.

no iOS vamos adicionar o AnimationViewRenderer.Init(); no AppDelegate.cs:

E no Android AnimationViewRenderer.Init(); na MainActivity.cs

Hora de Brincar!

Utilizando o Controle

Agora vamos realizar uma implementação simples no nosso Xaml, para utilizar o Lottie precisamos referenciar o controle xmlns:lottie=”clr-namespace:Lottie.Forms;assembly=Lottie.Forms”

Notem que estou utilizando um arquito video_cam.json para a animação, então precisamos incluir ele nos projetos.

no iOS ele deve ficar na pasta Resources e no Android na pasta Assets

Se quiser diversas animações prontas pode acessar o repositório oficial do Lottie, clicando aqui.

Vamos rodar!