Lottie API para Animações no Android

Lottie API
Para
Animações
no Android
thiengo.com.br

Animação no Android
Há inúmeras APIs, nativas e não nativas, somente para animação no Android. A
ObjectAnimator e a Facebook Keyframes provavelmente estão entre as mais
populares, digo, populares depois da Lottie API.
Com exceção da Lottie, todas as outras APIs para animação no Android vêm
carregadas de limitações:
• Ou não é nada trivial a codificação para conseguir até mesmo simples
animações sincronizadas;
• Ou as funcionalidades da API não permitem que tenhamos em projeto nada
melhor do que um GIF (ou PNG animado) com qualidade abaixo da esperada.
Então a Lottie API é perfeita, não tem limitações?
Sim, ela tem limitações. Mas o suporte é bem mais completo do que, por exemplo,
o Android Vector Drawable (AVD), API nativa que não suporta o mesmo número de
características do After Effects que a Lottie API suporta.

Conhecendo e codificando:
Android Lottie API

Lottie API
A biblioteca Lottie foi criada pelos engenheiros de
desenvolvimento do AirBnb com o propósito de
permitir animações mais completas em sistemas
mobile e Web.
Aqui o termo "mais completas" é sinônimo de: maior
suporte às animações criadas no Adobe After Effects,
hoje um dos principais softwares no mercado para a
criação de animações digitais.
O nome Lottie é uma homenagem a uma diretora
alemã, Lotte Reiniger, que é a criadora da mais antiga
filmagem de longa metragem ainda existente, o filme
The Adventures of Prince Achmed de 1926.
As animações que rodarão junto aos códigos Lottie de
seu projeto devem ser criadas no After Effects e então
exportadas como arquivos JSON, exportação
realizada junto ao uso do plugin open source
Bodymovin.
Clique aqui para abrir a animação

Não desanime, temos a LottieFiles.com
Essa parte de: criar animação; e exportar da
maneira correta. Isso não é nada trivial para nós
desenvolvedores de software.
Eu particularmente não acredito ser um bom
investimento em carreira focar também nos
estudos de criação de animações, até porque
não é algo que, para gerar qualidade, será
aprendido da noite para o dia, terá uma curva
de aprendizagem de médio longo prazo nessa
jornada.
Mas não se preocupe caso você não tenha o
conhecimento sobre o After Effects e nem
mesmo um profissional de animação ao seu
lado.
Nós programadores temos um site somente
com animações open source: LottieFiles.com.

As animações são todas preparadas para rodar junto a API Lottie, animações já
exportadas em JSON com o uso do After Effects e Bodymovin.
É possível até mesmo editar as cores da animação escolhida depois de acionar
"Customize with Bodymovin Editor”:
Não deixe de acompanhar o projeto de exemplo no artigo deste conjunto de slides,
pois nele utilizaremos duas animações diretamente da LottieFiles.

Instalação da API
A API está no repositório jcenter(), logo, temos apenas que adicionar a referência a
ela no Gradle App Level, ou build.gradle (Module: app):
Na época da construção deste conjunto de slides a versão mais atual e que rodava
sem problemas as funcionalidades propostas pela API era a versão beta: 2.6.0-
beta19.
Mas recomendo que somente utilize uma versão beta em seu projeto oficial, que irá
a produção, se depois de uma bateria de testes for constatado que a API mesmo
em versão beta roda sem problema algum.

Animação local, folder /assets, com LottieAnimationView
Agora a parte que mais empolga na API: os códigos simples para ter animações
completas.
A LottieAnimationView é uma das classes presentes para executar animações,
além de ser a mais recomendada na documentação oficial da Lottie API.
Antes de apresentar o código de exemplo vale informar que a
LottieAnimationView herda de ImageView, ou seja, é possível utilizar todas as
características de um ImageView utilizando somente a LottieAnimationView,
mesmo para carregamento de imagens estáticas.
Assim um código XML de exemplo:

Como com qualquer outra View, podemos trabalhar toda a criação e configuração
da LottieAnimationView também em código dinâmico, em programação. Mas eu
fortemente recomendo que você deixe o que é estático em arquivo de conteúdo
estático, como um file XML.
Os atributos lottie_ são muitos, vamos a explicação dos utilizados em código
anterior:
• lottie_autoPlay: inicia a animação dispensando a necessidade de invocação
de playAnimation() em código;
• lottie_fileName: permite que tanto animações .json quanto animações
em .zip possam ser carregadas diretamente do folder /assets. Caso a
animação android_wave.json estivesse, por exemplo, dentro do folder /
assets/minhas_animacoes então a referência em lottie_fileName seria
"minhas_animacoes/android_wave.json";
• lottie_loop: indica se a animação vai continuar em repetição assim que
finalizada.

Executando o código anterior, temos:
Confesso que fiquei confuso quando você informou sobre animações também
em .zip. O que seria isso?
Um exemplo são as animações criadas com o uso de imagens, neste caso será
exportado do After Effects, junto ao Bodymovin, um .zip contendo o arquivo JSON
da animação vetorial e as imagens referenciadas neste arquivo JSON.

Animação local, folder /raw
Também é possível carregar
animações locais diretamente do
folder /drawable/raw, mas neste
diretório somente animações .json é
que serão carregadas. Veja o código
de exemplo:
Dessa vez o atributo de referência a
animação é o lottie_rawRes.
Executando o código anterior,
temos:

Para facilitar ainda mais a vida do desenvolvedor Android, temos a possibilidade de
carregar animações diretamente da rede.
Toda a configuração de cache e requisição remota é abstraída do domínio do
desenvolvedor, somente temos de colocar a url correta e ver a animação acontecer.
Segue código de exemplo:
Animação remota, utilizando lottie_url

O atributo lottie_url também aceita referencias a arquivos .zip. Executando o
código anterior, temos:
Thiengo, então se eu quiser carregar alguma imagem remota utilizando o lottie_url
conseguirei sem problemas?
Não. O atributo lottie_url é somente para animações After Effects em .json ou .zip.
Imagens ainda têm de ser carregadas via android:src, digo, imagens locais. Para
imagens remotas você pode utilizar o Universal Image Loader.

Lembrando que para carregamento remoto de animação é preciso ao menos a
permissão de Internet no AndroidManifest.xml:
Importante: somente escolha por animações remotas se essa realmente for a
melhor opção em seu domínio de problema, pois animações remotas dependem
até mesmo da disponibilidade de banda do usuário.

Para ouvir a cada nova atualização de frame na animação podemos implementar a
Interface ValueAnimator.AnimatorUpdateListener como a seguir:
Listener de atualização de animação
Assuma que aqui estamos utilizando o plugin kottlin-android-extensions e assim a
propriedade lav_time_zip é equivalente ao ID de uma LottieAnimationView em
tela. Enquanto a animação estiver ocorrendo o método onAnimationUpdate() é
invocado.
O parâmetro animator, do tipo ValueAnimator, nos permite acesso (e modificação) a
algumas configurações de animação. Mas segundo meus testes, realizar
atualizações em animação, quando necessário, ainda tem como melhor caminho o
uso da instância de LottieAnimationView.

Listener de início, de fim, de repetição e de cancelamento de
animação
Para ouvir os triggers de
início, de fim, de repetição
e de cancelamento de
animação devemos
implementar a Interface
Animator.AnimatorListen
er. Veja o código ao lado:

Como explicado no código do slide anterior, o parâmetro animator na verdade é
também do tipo ValueAnimator como em onAnimationUpdate(), apresentado na
seção (tópico em slides) anterior.
Importante: o conhecimento completo dos listerners Lottie é necessário, pois
certamente você os utilizará para acionamento de funcionalidades de seu domínio
de problema.

Progresso de animação via propriedade progress
É possível controlar o andamento da animação via código de programação, para
isso temos de atualizar a propriedade progress como no código de exemplo a
seguir.
Primeiro o trecho XML:

Então o código Kotlin (poderia ser Java, com quase as mesmas configurações):
Como informado em código XML: independente da duração da animação, o valor
que deve ser abordado em progress deve estar entre, incluindo eles, 0.0F e 1.0F.

O SeekBar foi utilizado para facilitar o exemplo, mas progress pode ser atualizado
em qualquer contexto que esteja dentro da thread UI.

Trabalhando com frames
O trabalho com os frames da animação se faz necessário principalmente se você desenvolvedor Android
for utilizar alguma animação baixada da Internet, ou seja, animação After Effects que não foi desenvolvida
especificamente para o seu domínio de problema.
Com a configuração de frame é possível definir o ponto que a animação se inicia e o ponto que ela finaliza,
mesmo se a configuração de loop estiver em true.
Antes de partirmos para o código de exemplo, veja quais são os métodos que permitem a configuração de
frames:
• setMinFrame( Int ): permiti definir em qual parte, frame, a animação se iniciará. O argumento é um
Int entre 0 e o último frame existente na animação;
• setMaxFrame( Int ): permiti definir em qual parte, frame, a animação finalizará. A configuração de
argumento é como em setMinFrame();
• setMinAndMaxFrame( Int, Int ): permiti a definição de frame mínimo e máximo em animação;
• setMinProgress( Float ): permiti definir em qual ponto se iniciaria a animação. O argumento é do
tipo Float e deve variar entre 0.0F e 1.0F;
• setMaxProgress( Float ): permiti definir em qual ponto se finalizará a animação. A configuração de
argumento é a mesma em setMinProgress();
• setMinAndMaxProgress( Float, Float ): permiti, em uma única invocação, a definição de progresso
mínimo e máximo;
• frame: propriedade que permite definir, ou obter, o frame atual da animação em tela.

Caso você não tenha em mãos a informação de total de frames presente em uma
animação, é possível utilizar a propriedade maxFrame para saber o total de frames
nela:
Note que você somente obterá o valor real em maxFrame se a animação já estiver
renderizada em tela, ou seja, pode ser que um código similar ao seguinte seja
necessário:

Com isso podemos ir ao código de exemplo. Primeiro a parte XML, sem ainda a
definição de min e max frame:

Agora a parte de programação, já com a definição de min e max frame:
A animação em teste tem um total de 180 frames, mas no código acima cortamos
isso. Executando o algoritmo com o trecho anterior incluído, temos:
Animação de duração bem inferior, de 180 frames (aproximadamente 6 segundos)
para 50 frames (aproximadamente 1.8 segundos).

Trabalhando a velocidade (duração) da animação
Com a propriedade speed é possível definir em qual velocidade a animação vai
trabalhar. speed aceita um valor Float, onde 1.0F é o valor da velocidade padrão.
Valores menores que 1.0F diminuem a velocidade da animação e valores maiores
aumentam.
A seguir o código XML de exemplo de uma LottieAnimationView sem alteração
em speed:

Agora o código que acelera a animação:
Uma animação de 4 segundos para agora aproximados 1.1 segundos.

Se um valor negativo for fornecido em speed, a animação trabalha de maneira
invertida. Segue atualização do código anterior:
Executando a última atualização, temos:

Número e modelo de repetições
É possível ser mais específico quanto a característica de loop e definir exatamente
quantas vezes uma repetição deverá ocorrer. Também é possível definir o modo da
repetição.
A seguir um LottieAnimationView de exemplo:

Executando o trecho anterior, temos:

Agora definindo o repeatCount e o repeatMode:
Executando novamente, agora com o trecho atualizado, temos:

A propriedade repeatCount define, ou retorna, quantas vezes a animação deve ser
repetida. Se a contagem de repetições for 0, a animação nunca será repetida. Se a
contagem de repetições for maior do que 0 ou então LottieDrawable.INFINITE, o
modo de repetição será levado em consideração. O valor padrão é 0.
A propriedade repeatMode aceita os seguintes valores:
• LottieDrawable.RESTART: quando a animação chega ao fim e repeatCount
é LottieDrawable.INFINITE ou um valor positivo, a animação é reiniciada;
• LottieDrawable.REVERSE: quando a animação chega ao final e
repeatCount é LottieDrawable.INFINITE ou um valor positivo, a animação
inverte a direção em cada nova iteração;
• LottieDrawable.INFINITE (esta constante tem real efeito quando em
repeatCount): valor utilizado com a propriedade repeatCount para repetir a
animação indefinidamente.

Modificando a cor com lottie_colorFilter
Para modificar a cor total de uma animação é tão simples quanto ativar / desativar
o loop dela. A seguir o LottieAnimationView de uma animação com cores
originais.
Executando o projeto com o código anterior, temos:

Agora o mesmo LottieAnimationView com o lottie_colorFilter configurado:
Executando o projeto com a nova configuração de animação, temos:
Note que o efeito positivo de lottie_colorFilter ocorre quando a animação tem
transparência também na parte interna dela, caso contrário ficará tudo de uma
única cor, ou seja, não haverá animação.

Animação com LottieDrawable
Além da API LottieAnimationView temos a API LottieDrawable que
resumidamente nos permite: colocar drawables animados em componentes que
aceitam arquivos drawables.
A seguir um ImageView de exemplo, View que receberá uma animação presente
no folder /assets:
Agora o código dinâmico que ativa a animação no ImageView anterior:

É importante ressaltar que o recomendado em documentação é o uso da API
LottieAnimationView. São raros os casos onde a LottieDrawable poderá ser utilizada
e a LottieAnimationView não.
Eu particularmente me interessei pela LottieDrawable para utiliza-la junto a alguma
Spanned String, pois sei que é possível colocar drawables nesse tipo de String.
Porém em meus testes foi constatado que um drawable animado não é carregado em
uma Spanned String. Se você teve resultados diferentes, não deixe de comentar aqui
no artigo deste conjunto de slides.
A LottieDrawable é pouco documentada e a maioria dos códigos utilizando ela, e
disponíveis na comunidade Android, são códigos depreciados.
Quando realizei os testes a invocação
LottieComposition.Factory.fromAssetFileName() era apresentada como depreciada,
mas foi o único exemplo válido encontrado.
Logo, prefira o uso da LottieAnimationView, pois, em minha opinião, há fortes indícios
de que a LottieDrawable não continuará como uma entidade pública.
Uma informação importante para aqueles que tentarão a LottieDrawable é que: ao final
do processamento, quando a animação não é mais útil, o método recycleBitmaps()
deve ser invocado, pode ser até mesmo no onDestroy() da atividade host da animação.

KeyPath para a animação de partes separadas
Um arquivo de animação gerado via After Effects junto ao Bodymovin, esse arquivo
tem uma estrutura JSON hierárquica onde o todo se chama Composition e os
objetos que integram o todo são denominados Layers.
Cada layer, camada, tem um nome e pode ser atualizado de maneira
independente.
A seguir um LottieAnimationView que ainda não passou por nenhuma atualização
independente de layer:

Executando o projeto com o simples LottieAnimationView anterior, temos:

Agora o código onde modificaremos as cores das montanhas da animação de
fotografia:

Para a aplicação de animação em layer, o método addValueCallback() deve ser
utilizado, com os parâmetros:
• KeyPath: que permite identificar, pelo nome, os layers que serão atualizados.
A chave "**" indica a correspondência para zero ou mais layers. Para a
definição de cor não foi possível colocar mais de um layer por método
addValueCallback() e sempre, como último argumento em KeyPath, é
necessária a definição de "**";
• Property: que identifica a propriedade que será atualizada nos KeyPaths
indicados em primeiro argumento. Aqui definimos que a propriedade de cor é
que será atualizada, LottieProperty.COLOR_FILTER. Em Animatable
Properties há todas as propriedades passíveis de atualização independente;
• Callback: instância que contém a configuração de atualização da propriedade
definida em segundo argumento. Tem que ser uma LottieValueCallback.
Os termos "Mountain front" e "Mountain back" foram encontrados no arquivo
JSON de animação. Os nomes dos layers de sua animação estão sempre nas
chaves nm.

Executando o projeto Android com o código anterior de atualização de layer, temos:

Agora a atualização de posicionamento da montanha de trás, a montanha azul:
Note que diferente da animação da propriedade de cor, aqui não precisamos da
chave "**" para que a atualização ocorra.
Eu sei, isso é um pouco estranho, mas acredite, descobri isso na "martelada", pois
a documentação sobre KeyPath na doc oficial da Lottie API é bem simples, não diz
muito em termos de código.

Executando o projeto com novo algoritmo, temos:

Mais opções de configuração
A seguir mais algumas opções de configuração que podem ser acessadas,
algumas também podem ser atualizadas, além das já apresentadas até aqui.
Note que todas as configurações a seguir somente retornarão valores válidos se
forem invocadas depois de a animação já estar renderizada em tela. Segue:

Muitas das configurações apresentadas no slide anterior são bem especificas para
aqueles profissionais que têm um conhecimento mais apurado sobre as
necessidades das animações em uso, por exemplo: a propriedade
useHardwareAcceleration que permite um developer com expertise em animação
tomar decisões de processamento com base no valor retornado desta entidade.

Tamanho (altura x largura) da animação
As animações criadas com o After Effects e exportadas com o plugin Bodymovin
são animações vetoriais, ou seja, não há necessidade de criar animações com
exacerbadas largura e altura.
A documentação oficial da Lottie API recomenda que as animações, quando o
maior tamanho possível é necessário, sejam criadas nas dimensões 411px x
731px, pois a Lottie API transformará esses valores em DPs.
De qualquer forma, caso você tenha problemas com a cobertura da animação em
tela, lembre que LottieAnimationView herda de ImageView e assim é possível
utilizar com sucesso o atributo android:scaleType com os valore centerInside ou
centerCrop.

Pontos negativos
• A documentação não está atualizada ao menos em relação a versão mais
atual da API na época da construção deste conteúdo, a versão 2.6.0-beta19;
• Não há um mínimo exemplo funcional com a LottieDrawable. Se essa API
não tem tanta importância assim ela poderia ser removida;
• Os exemplos com KeyPath, animação independente de layer, também são
escassos.

Pontos positivos
• As animações podem ser invocadas com poucas linhas de código, exigindo
um mínimo apenas em código XML, facilitando a construção do projeto;
• Todo o trabalho de carregamento e gerência de animação em cache já é
realizado pela própria API;
• A herança do ImageView facilita em muito o enquadramento da animação em
tela, quando necessário;
• A possibilidade de carregamento de animação em servidor remoto é outro
ponto de destaque. Como código extra somente temos de definir a permissão
de Internet.

Conclusão
Animações, sem sombra de dúvidas, trarão maior profissionalismo ao seus
projetos Android. A Lottie API permitirá que você consiga isso sem muito esforço.
Somente tome cuidado com a quantidade de animações carregadas em tela, pois
em testes realizados foi constatado que quanto mais animação em tela, maior a
necessidade de processamento e menos responsivo fica o aplicativo, afetando
diretamente a experiência do usuário.
Lembre que caso você não tenha um artista de animações After Effects ao seu
lado e também não tenha expertise em criação de animações com este software,
você tem o site LottieFiles que certamente, junto a configurações
LottieAnimationView, lhe permitirá obter o máximo de animação em seu domínio
de problema.

Tutorias para criação de animações no After Effects
Caso você como desenvolvedor Android queira arriscar no aprendizado de
animações no Adobe After Effects, a seguir deixo alguns tutoriais que poderão lhe
ajudar com isso:
• Tutorial BÁSICO de ANIMAÇÃO | After Effects;
• COMO FAZER 5 ANIMAÇÕES INCRÍVEIS no AFTER EFFECTS com
SHAPES!;
• After Effects-Animação simples;
• Tutorial Swift iOS: Exportando animações do After Effects com Bodymovin e
Lottie;
• Instalação e configuração do Lottie no After Effects.

Fontes
Conteúdo completo, em texto e em vídeo, no link a seguir:
• https://www.thiengo.com.br/lottie-api-para-animacoes-no-android
Fontes:
• http://airbnb.io/lottie/
• https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e
• https://share.atelie.software/a-nova-era-de-anima%C3%A7%C3%B5es-
mobile-com-lottie-3c0bca980782
• https://medium.com/blog-do-mitrut/suas-uis-animadas-com-
lottie-431c4176623e

Para estudo
• Treinamento oficial:
• Prototipagem Profissional de Aplicativos Android.
• Meus livros:
• Receitas Para Desenvolvedores Android;
• Refatorando Para Programas Limpos.
• Redes:
• Udemy;
• YouTube;
• Facebook;
• LinkedIn;
• GitHub;
• Twitter;
• Google Plus.
• Blog App.

Lottie API Para Animações no
Android
thiengo.com.br
Vinícius Thiengo
thiengocalopsita@gmail.com

Lottie API para Animações no Android

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Lottie API para Animações no Android

Similaire à Lottie API para Animações no Android (20)

Plus de Vinícius Thiengo

Plus de Vinícius Thiengo (6)

Dernier

Dernier (20)

Lottie API para Animações no Android