Ícones Animados Android Parte 1
Pessoal hoje vamos ver um pouco sobre animação, vamos dar vida ao menu onde ao invés de ser um ícone fixo podemos adicionar uma animação
Esse artigo foi dividido em duas partes, a primeira vamos aprender como criar os ícones animados e na segunda parte vamos implementar dentro do android studio.
Segue o link da segunda parte do artigo
https://diegosalviano2007.medium.com/%C3%ADcones-animados-android-parte-2-98e0ba4c0e9e
Primeiro de tudo vamos abrir esse site que é onde vamos fazer as animações com ícones SVG.
Exitem muitos sites que vocês podem baixar ícones em SVG, estou usando esse ícone.
https://freeicons.io/essential-collection-3/map-location-icon-icon
Próximo passo agora é efetuar o import desse ícone que baixamos, encontre o ícone que foi feito download e abra ele.
Como podem ver já abri o ícone, e agora vamos entender um pouco o nosso SVG. Ele está quebrado em algumas imagens, como por exemplo a imagem da linha que está selecionada na imagem seguinte.
Cada path desse é referente a uma parte na imagem completa, ao clicar podemos animar tamanho, formas e até mesmo cores.
Pode também acontecer de que tenha apenas 1 path então a animação vai ser com a imagem toda, nos próximos exemplos vou te mostrar como que vamos fazer uma animação simples apenas para você ir pegando o ritmo. É muito legal!
Agora vamos começar a brincadeira, clique no + e vai em até new group layer.
Com isso ele vai criar um group de layer e então você pode arrastar o path que desejar para fazer a primeira animação, eu escolhi o path_3 e path_4 dessa minha animação, você deve arrastar os dois para dentro de group como eu fiz no exemplo abaixo.
Clicando no ícone do relógio vamos ter algumas das opções possíveis para animar o nosso ícone, pode ficar a vontade de testar cada uma delas. Vou agora demonstrar apenas o uso do translateX.
Vale lembrar que você precisa clicar no relógio da pasta group caso queira editar algo relacionado a imagem, como por exemplo as cores. Agora, vamos clicar no relógio do path_3.
Como podem ver temos essas possibilidades clicando no ícone do relógio do group então agora vamos clicar no translateX.
Como podem ver, depois de termos clicado no translateX, temos a nossa timeline onde a animação acontece se você fizer o play. Porém, agora ele não vai mudar nada.
Primeiro de tudo, nossa animação tem um tempo definido como padrão de 300ms. Agora, vamos aumentar esse tempo para 800ms.
Clicando em anim 300ms vai aparecer para vocês a opção de ajuste. Então, vamos alterar para 800 que nossa timeline já vai ficar bem maior.
Agora, podemos clicar em nossa timelne. Vamos clicar na linha verde, onde existem algumas opções que vamos allterar.
startTime: é o momento de inicio de nossa animação.
endTime: é onde vamos finalizar essa animação.
interpolator: temos opções para fazer com que seja possível movimentar o nosso path, podem escolher de uma a uma e ver qual fica melhor para sua animação.
fromValue : é o valor de início. Por exemplo, minha animação está iniciando 0 no centro mas eu poderia colocar pra iniciar com o valor 4 e voltar para 0.
toValue: pegando um gancho do valor de cima, por exemplo, caso o fromValue inicie em 0 e o toValue esteja com 4, minha animação vai acabar quando se movimentar até o 4.
Para fazer o movimento continuar como um loop podemos duplicar a nossa animação e colocá-la para iniciar depois que acabar a primeira. Então, invertemos os valores, o fromValue teria 4 e o toValue teria 0.
Então deu pra entender ?
Calma, vamos lá! Acredito que nos próximos exemplos podemos refrescar um pouco e nos divertir bastante. Depois de ter visto sobre algumas funcionalidades, agora vamos botar a mão na massa e criar nossa animação!
Espero que tenham conseguido fazer igual ao vídeo. Vamos avançar agora, depois de ter criado a nossa aplicação, vamos exportá-la como Animated Vector Drawable.
Em nosso próximo artigo vamos aprender como utilizar as animações que foram feitas em nosso projeto.
Muito obrigado espero ter ajudado, até o próximo passo.
