Animações com Lottie – Xamarin.Forms

Olá, neste post irei demonstrar como você pode implementar animação de alta qualidade em suas aplicações Xamarin.Forms utilizando o Lottie.

Lottie

Basicamente, Lottie é uma biblioteca que renderiza animações After Effects em tempo real, permitindo que os aplicativos usem essas animações com a mesma facilidade com que usam imagens estáticas. Para saber mais acesse: https://airbnb.design/introducing-lottie

ADICIONANDO O NUGET PACKAGE

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

1

 

Digite “Com.Airbnb.Xamarin.Forms.Lottie” e selecione o plugin como demonstrado na imagem a seguir.

2

 

Selecione todos os projetos e clique no botão “Install”.

2

Lottie Files

Acesse https://www.lottiefiles.com e faça o download da animação desejada.

5.png

Android

Adicione o arquivo no seu projeto .android dentro da pasta “Assets”.

android

iOS

Adicione o arquivo no seu projeto .iOS dentro da pasta “Resources”.

ios

XAML

Comece referenciando o Lottie.Forms e em seguida crie um AnimationView e na propriedade Animation coloque o nome do arquivo json que você fez o download no passo anterior.

 

 

Resultado

ezgif.com-gif-maker (12)

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

14 comentários em “Animações com Lottie – Xamarin.Forms

      1. Olá Wanderson,
        Tudo bem ?

        Acabo de me certificar que o projeto do GitHub está ok.

        Você poderia me mandar o erro que está tendo para que eu possa tentar ajuda-lo ?

        Curtir

  1. No meu da esse erro qdo vou instalar no projeto android: Severity Code Description Project File Line Suppression State
    Error Could not install package ‘Com.Airbnb.Android.Lottie 2.5.4’. You are trying to install this package into a project that targets ‘MonoAndroid,Version=v7.1’, but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author. 0

    Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s