Olá. Sou o zm soft, que se registrou como desenvolvedor no ano passado (final de 2023) e começou a lançar aplicativos. Também planejamos lançar um aplicativo para desenvolvedores, então confira se tiver interesse.
Vocês usam exibição de animações em seus aplicativos? Com apenas um pouco de animação, o app fica mais intuitivo e visualmente atraente, não é mesmo? Por isso, hoje quero escrever sobre como exibir animações em aplicativos Android.
LottieAnimation
A biblioteca que uso é a LottieAnimation, uma biblioteca para exibição de animações. A utilizo porque permite exibir animações leves de forma relativamente simples.
Tipos de animações disponíveis
Primeiramente, um ponto positivo dessa biblioteca é a abundância de animações disponíveis gratuitamente. Por exemplo, existem animações como estas.
Essas animações são publicadas no site oficial do LottieFiles. Há também muitas animações pagas, mas apenas filtrando pelas gratuitas já há o suficiente para usar. Basicamente, como não tenho habilidade nem energia para criar animações do zero, quando quero adicionar algum movimento, primeiro penso em buscar algo utilizável nesse site. Por exemplo, usando animações como essas, é possível mostrar ao usuário os pontos de clique comuns na primeira exibição. De fato, usei a animação à direita para orientar os usuários sobre como operar.
O diferencial: a simplicidade
A implementação também pode ser tratada de forma bem simples. Por exemplo, se quiser apenas exibir uma animação em um layout específico, basta defini-la da seguinte forma para funcionar. Não é ótimo que funcione sem precisar implementar nenhuma lógica?
Método simples de implementação do Lottie
A implementação do Lottie é extremamente simples. Basta incorporar a animação em um layout específico para que funcione sem lógica adicional.
Exemplo de implementação:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Uso básico do Lottie
Os principais passos para usar o Lottie são:
- Integração da biblioteca (modificação do build.gradle)
- Obtenção e posicionamento do arquivo de animação
- Configuração do arquivo de layout
- Personalização da animação
Exemplos de implementação concretos e código
A seguir estão exemplos concretos de implementação ao usar o Lottie. Incluem a integração da biblioteca, como posicionar o arquivo de animação, como configurar o arquivo de layout e como personalizar a animação.
Registro no build.gradle / Integração da biblioteca:
Primeiro, integre a biblioteca para poder usar o Lottie.
Se não houver problemas de compatibilidade, use o ambiente mais recente.
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
Posicionamento do arquivo de animação:
Baixe o arquivo de animação favorito (.json) do site oficial do LottieFiles e coloque-o na pasta res/raw do aplicativo.
Configuração do arquivo de layout:
Adicione o LottieAnimationView ao layout XML para que possa referenciar o arquivo de animação baixado.
Personalização da animação:
Personalize o comportamento da animação conforme necessário. Nas configurações de animação, é possível fazer o seguinte:
- Com ou sem reprodução em loop
- Especificação do número de repetições
- Especificação da velocidade de reprodução (incluindo reprodução reversa)
Adicionando processamento dinâmico, você pode reproduzir/parar no momento desejado e alterar a velocidade de reprodução.
Primeiro, sobre a forma de especificação estática. O comportamento da animação muda de acordo com as seguintes especificações.
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
android:scaleType="centerCrop"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_speed="0.15"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Neste exemplo, o arquivo your_lottie_animation.json é reproduzido automaticamente a 0,15x de velocidade e em loop.
Em seguida, o processamento dinâmico:
lottieAnimationView.playAnimation()
Com o processamento acima, é possível reproduzir. Além da reprodução, você pode alterar as configurações para parar, mudar a velocidade etc. Também é possível definir um listener como abaixo para detectar o fim da reprodução e processar:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
Pontos de atenção e solução de problemas
O Lottie é muito útil, mas há alguns pontos de atenção. Em particular, parece que a mudança de posição de objetos às vezes não funciona como esperado. Também explicarei o problema de estouro de pilha relacionado ao processamento no final da animação e o comportamento após o onPause.
Exemplo de solução de problemas 1:
Foi um problema na minha implementação: a forma de lidar com o processamento no final da animação causou um estouro de pilha. Concretamente, havia um problema no processamento que revertia a reprodução ao chegar ao final da animação e repetia a reprodução e a reprodução reversa. O problema foi resolvido postando na thread principal e recolocando na fila:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
lottieAnimationView.post {
// 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
if(isAttachedToWindow) {
lottieAnimationView.playAnimation()
}
}
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
Exemplo de solução de problemas 2:
Outro ponto a ser observado é o processamento após o onPause. Para evitar operações desnecessárias, a animação em segundo plano deve ser interrompida.
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// アニメーションを開始
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
No entanto, se houver processamento no final da animação etc., apenas isso não foi suficiente. Por isso, foi necessário verificar se a view pai não estava desanexada e reprocessar:
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
Conclusão
O Lottie é uma ferramenta poderosa para melhorar a UI do aplicativo. Há muitas animações disponíveis gratuitamente e a implementação é simples. Compreendendo os pontos de atenção e tratando-os adequadamente, você pode usufruir de grandes vantagens no desenvolvimento de aplicativos. Embora haja alguns pontos de atenção, no geral é muito fácil de usar e há muitos recursos disponíveis gratuitamente, por isso acho que é uma biblioteca excelente. Tenho certeza de que contribuirá para melhorar a aparência do app, então experimente.