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.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoLottie"
xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
x:Class="DemoLottie.MainPage">
<StackLayout>
<forms:AnimationView
x:Name="animationView"
Animation="xamarin_logo_2.json"
Loop="true"
AutoPlay="true"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"/>
</StackLayout>
</ContentPage>

view raw
MainPage.xaml
hosted with ❤ by GitHub

 

 

Resultado

ezgif.com-gif-maker (12)

 

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

icongithub

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

  1. Olá..
    Interessante, essa solução pode ser aplicada para reproduzir vídeos e gifs? Ou qual solução é mais adequada?

    Grata

    Curtir

      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

  2. 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

    1. Olá,

      Verifique se os pacotes do “Android.Support” estão atualizados corretamente.
      Espero ter ajudado.

      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