Icon Animation | Como animar ícones usando Font Awesome e Javascript Nativo? | SW9
Olá Pessoal. Sejam Bem Vindos ao canal e blog SW9 (http://blog.sw9.com.br) ?
#O que veremos na aula de hoje?
Vou apresentar uma técnica simples e bem prática, para quem está procurando uma forma de criar ícones animados em projetos web ou aplicações híbridas ?
Combinaremos a biblioteca de ícones chamada Font Awesome com Javascript Puro para produzir as animações.
#Introdução
Alguma vez você precisou utilizar algum ícone animado em seu projeto web? Já faz algum tempo que esta prática é bem comum, e que, se usado na medida certa, eleva a experiência de seu usuário.
Foi pensando nisso, que decidi compartilhar algumas técnicas para animar ícones.
#Antes de começar
O projeto que criaremos nesta AULA está disponível na minha área de downloads. Para acessá-la é bem simples, basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar o seu melhor e-mail e na sequência você receberá o acesso para fazer download deste projeto e de muitos outros.
Portanto, não deixem de acessar a área de downloads e bons estudos. ?
Ah, caso tenha algum problema para receber o link via e-mail, por favor entrem em contato comigo. ?
#Porque e onde devemos usar ícones animados?
Desde o surgimento da Internet até hoje, muita coisa mudou, vários padrões surgiram, outros, por sua vez, caíram por terra. Independente destas mudanças, na minha opinião, o objetivo principal não mudou: a busca incessante por público, visualizações, cliques e experiência do usuário.
Uma das formas de aproximar o usuário e proporcionar uma experiência diferenciada, é utilizar recursos visuais atrativos e funcionais para o público. É neste contexto que o uso de ícones animados entra em campo. ⚽
Mas onde podemos usar ícones animados? Em que situação eles fazem sentido? A minha sugestão é utilizar ícones animados em três situações:
1- Page loader – durante a transição de uma página podemos utilizar uma animação;
2- Dentro de um formulário, fazendo parte de botões;
3- Durante uma requisição Ajax: para indicar que a requisição está em andamento.
#Não exagere na dose!!!
Agora pare e pense ✋ É altamente recomendado usar ícones animados em seu projeto, mas use com moderação. O uso exagerado pode trazer o efeito contrário para o seu projeto.
Afinal de contas você não vai querer que seu projeto vire uma árvore de natal. ? Use na medida certa e tenha sucesso.
#Alternativas para produzir animação
Existem inúmeras alternativas para produzir animação, especialmente animação de ícones. No entanto, abordarei este tema apresentando duas técnicas simples, rápidas e com excelentes resultados.
Nesta primeira AULA abordaremos uma técnica de animação de ícones usando Font Awesome e Javascript Nativo, já na segunda AULA você vai aprender a animar ícones utilizando Font Awesome e CSS3 animation.
#Qual será o nosso projeto?
Na aula prática, você vai acompanhar passo a passo a criação de duas animações. Uma animação para simular o carregamento de uma bateria de celular/notebook e outra simulando a abertura de um envelope.
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
#Apresentando a biblioteca de ícones Font Awesome
Um dos pré-requisitos para a construção do projeto é instalar a biblioteca de ícones Font Awesome. Esta biblioteca é uma das mais completas do mercado e possui inúmeros recursos. Durante a AULA eu vou explicar o básico que você precisa para conseguir utilizá-la.
Mas eu só consigo criar animações usando esta biblioteca de ícones Font Awesome? A resposta é não. Você pode aplicar esta técnica usando outras bibliotecas.
Dica: depois de assistir esta AULA e construir o projeto junto comigo, que tal tentar aplicar o que aprendeu usando outra biblioteca de ícones? Depois, se quiser,
poste seu comentário aqui. ?
#Entrando em campo o Javascript
Mas só a biblioteca Font Awesome não é suficiente para o nosso projeto. Neste momento entra em campo o Javascript. Vamos usar duas funções temporizadoras que fazem parte do JS, são elas setTimeout e setInterval.
#Temporizadores SetTimeout e SetInterval
Para chegar ao resultado esperado, vamos usar o setTimeout para transição entre os quadros (diferentes ícones que fazem parte da mesma animação) e a função setInterval para repetir a mesma animação a cada x segundos.
Simples assim. ?
#Compatibilidade
Parando para pensar na compatibilidade desta técnica frente aos navegadores, não se preocupe. As suas animações vão funcionar normalmente, exceto se o navegador estiver com o Javascript desativado rsrs ?
#Sua imaginação é o limite
A única limitação que poderemos enfrentar é a nossa própria imaginação e criatividade. Portanto, vamos exercitar a nossa imaginação. ???
#Hora de assistir ao vídeo
Chegou o momento de arregaçar as mangas e colocar a mão na massa. Go Go Go
[Conclusão]
Na aula de hoje [Icon Animation | Como animar ícones usando Font Awesome e Javascript Nativo? | SW9], você aprendeu a criar animações de ícones utilizando uma técnica simples e rápida, combinando a biblioteca Font Awesome e Javascript Nativo.
Está disponível na minha área de downloads o projeto que criamos em conjunto. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.
Dentro da minha área de Downloads, procure pela pasta ANIMACAO/ICONE/JAVASCRIPT. O resto é com vocês
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
Link do vídeo: https://youtu.be/9pWK8YVWYlU
PlayList Cloud 9: https://goo.gl/7aQbD6
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário