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…”.
Digite “Com.Airbnb.Xamarin.Forms.Lottie” e selecione o plugin como demonstrado na imagem a seguir.
Selecione todos os projetos e clique no botão “Install”.
Lottie Files
Acesse https://www.lottiefiles.com e faça o download da animação desejada.
Android
Adicione o arquivo no seu projeto .android dentro da pasta “Assets”.
iOS
Adicione o arquivo no seu projeto .iOS dentro da pasta “Resources”.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> |
Resultado
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano Custódio 
Bacana, mas eu poderia usar para tela de SplashScreen também?
CurtirCurtir
Olá,
Sim… Siga esse vídeo: https://www.youtube.com/watch?v=y8ce7OyAgYU
E substitua a imagem pelo AnimationView.
Espero ter ajudado. Abraço.
CurtirCurtido por 1 pessoa
Olá..
Interessante, essa solução pode ser aplicada para reproduzir vídeos e gifs? Ou qual solução é mais adequada?
Grata
CurtirCurtir
Olá…
Essa solução é apenas para quem deseja utilizar animações do tipo After Effects.
Para videos eu recomendo o meu post: https://julianocustodio.com/videoplayer e para gifs experimente utilizar o plugin FFImageLoading.
Espero ter ajudado.
CurtirCurtir
Uma pergunta, essa animação é em json? Parabéns pelos ótimos conteúdos !
CurtirCurtir
Olá Wanderson,
Sim… essas animações são json.
Obrigado 🙂
CurtirCurtir
Não consegui implementar ,também não funcionou o projeto baixado pelo GitHub.
CurtirCurtir
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 ?
CurtirCurtir
Consegui, atualizei o Xamrarin e o Netcore.
CurtirCurtir
Não mostra erro, apenas não funciona. limpei solução, compilei e nada.
CurtirCurtir
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
CurtirCurtir
Olá,
Verifique se os pacotes do “Android.Support” estão atualizados corretamente.
Espero ter ajudado.
CurtirCurtir
Eu consegui instalar, mas agora não aparece nd.
CurtirCurtir
Verifique se você está referenciando corretamente o arquivo .json
Espero ter ajudado 🙂
CurtirCurtir
Só funcionou depois que instalei a versão 2.5.4
netstandard2.0
CurtirCurtir