Introdução ao Animated Vector Drawable (AVD) para Android

Feb 21 2023

O que é um AVD? Começando com o Android Lollipop 5.0 API 21, a introdução da classe AnimatedVectorDrawable — e sua contraparte compatível com versões anteriores — trouxe consigo uma maneira nova e poderosa de definir animações no ecossistema Android por meio do uso de XML.

O que é um AVD?

Começando com o Android Lollipop 5.0 API 21, a introdução da AnimatedVectorDrawableclasse — e sua contraparte compatível com versões anteriores — trouxe consigo uma maneira nova e poderosa de definir animações no ecossistema Android por meio do uso de XML. Esses componentes podem ser definidos em um .xmlarquivo ou em três arquivos diferentes de acordo com a documentação oficial .

Pouco depois, no Android Nougat 7.1 API 25, o Android tornou esse recurso ainda mais poderoso, permitindo que essas animações fossem executadas fora do thread principal e, em vez disso, executadas no thread de renderização. Isso permite que o thread de interface do usuário se concentre firmemente nos principais componentes de interface do usuário do aplicativo e não gaste tempo com animações.

Neste artigo, explorarei AnimatedVectorDrawablemais a classe de e explicarei como criar e usar instâncias dessa poderosa classe em seu aplicativo Android para integrar ícones animados com facilidade.

O aplicativo Shape Shifter

O aplicativo web Shape Shifter é um projeto criado por Alex Lockwood que ajuda na criação de ícones animados para Android, iOS e web. O aplicativo Shape Shifter usa as técnicas de animação de ícones estabelecidas neste artigo do mesmo autor.

Fonte: https://github.com/alexjlockwood/ShapeShifter

Com a ajuda desta ferramenta, os desenvolvedores do Android podem criar ícones animados suaves que podem ser exportados diretamente da ferramenta para o seu projeto Android na forma de um AnimatedVectorDrawableXML.

Criando um AVD

Antes de prosseguir, vamos ver um exemplo de como usar o Shape Shifter para criar um XML de ícone animado simples que usaremos na próxima seção dentro de um projeto Android.

Começaremos escolhendo um ativo de ícone SVG que importaremos para o aplicativo. Para este exemplo, usaremos uma seta dupla apontando para a esquerda que iremos então animar.

Assim que o arquivo for importado para o aplicativo, podemos começar a adicionar animações clicando no botão do cronômetro no lado direito dos diferentes s pathdentro do painel inferior esquerdo e, em seguida, escolhendo o tipo de animação que gostaríamos de aplicar. Podemos então editar a duração da animação arrastando e soltando a barra de duração do caminho.

Depois de adicionar algumas animações, clicar em PLAY no botão central de reprodução mostrará o fluxo atual do ícone animado.

Quando estivermos satisfeitos com a animação composta que criamos, exportar o produto final do Shape Shifter para um arquivo AVD é muito simples. Clique no botão Exportar no canto inferior esquerdo e clique em Animated Vector Drawable depois disso.

Este processo irá baixar um .xmlarquivo que pode ser importado diretamente para o seu projeto Android, e este pode ser usado como um objeto AnimatedVectorDrawableou . AnimatedVectorDrawableCompatMais sobre isso na próxima seção.

Como usar um AVD

Começando com o arquivo XML da seção anterior, você pode trazer esse arquivo para o seu projeto adicionando-o à res/drawablepasta. Isso pode ser feito usando arrastar e soltar ou através do menu do IDE.

Assim que o arquivo XML for carregado em seu projeto Android, abrir o arquivo no IDE exibirá uma visualização interativa do ícone animado recém-adicionado. Para acionar a animação, basta clicar no botão PLAY na parte inferior do painel de visualização.

Assim que estivermos prontos para realmente usar o ícone animado, basta defini-lo como o srcvalor de da ImageViewmesma forma que você faria com um recurso de imagem normal. Observe que, como esse é um drawable vetorial, podemos definir o width& heightcomo quisermos e o ativo deve ser capaz de se redimensionar sem muita restrição.

Por fim, ícones animados na forma de AnimatedVectorDrawables devem ser acionados para iniciar a animação. Para fazer isso, basta chamar .start()a instância desenhável sempre que for apropriado.

E é isso! Certifique-se de chamar o código da função acima e veja seu ícone animado em ação.

Reflexão tardia

Em suma, o uso AnimatedVectorDrawablede s pode trazer algum brilho ao seu aplicativo. Se você estiver interessado em conferir os ativos que uso e ver os exemplos de código funcionando em sua máquina, confira o projeto de exemplo que fiz para este artigo.

Além disso, o aplicativo Shape Shifter oferece aos desenvolvedores uma maneira simples de criar ícones animados, sem o requisito pesado de inicializar uma ferramenta de design cara. Se você estiver interessado em aprender mais sobre a animação de ícones vetoriais, confira o mergulho profundo de Alex no tópico . Como alternativa, confira a versão BETA do Shape Shifter com novos recursos que não abordamos nesta peça e um novo mundo de possibilidades.