Como criar um carregador animado Favicon com JavaScript

Favicons são uma parte crucial da marca on-line, eles dar uma sugestão visual para os usuários e ajudá-los distinguir seu site de outros. Embora a maioria dos favicons seja estática, é possível criar favicons animados também.

Um favicon em constante movimento é certamente irritante para a maioria dos usuários, e também prejudica a acessibilidade, no entanto, quando é apenas animado por um curto período de tempo em resposta a uma ação do usuário ou a um evento em segundo plano, como um carregamento de página, ele pode fornecer informações visuais extras-melhorando, portanto, a experiência do usuário.

Neste post, vou mostrar como criar um carregador circular animado em uma tela HTML, e como você pode usá-lo como um favicon. A carregador de favicon animado é uma ótima ferramenta para visualize o progresso de qualquer ação realizada em uma página, como upload de arquivos ou processamento de imagens. Você pode dar uma olhada no demo que pertence a este tutorial em Github também.

1. Crie o elemento

Primeiro, precisamos criar uma animação de tela naquela desenha um círculo completo, 100% no total (isso será importante quando precisarmos incrementar o arco).

Estou usando o tamanho padrão do favicon, 16 * 16 pixels, para a tela. Você pode usar um tamanho maior do que isso, se quiser, mas observe que a imagem da tela será reduzido para os 16² área de pixels quando é aplicado como um favicon.

2. Verifique se é suportado

Dentro de carregando() manipulador de eventos, nós obter uma referência para o elemento da tela [cv] usando o querySelector () método e referir seu objeto de contexto de desenho 2D [ctx] com a ajuda do getContext () método.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) / *… * /;

Nós também precisamos verificar se a tela for suportada pelo UA certificando-se de que o objeto de contexto de desenho [ctx] existe e não é indefinido. Nós vamos colocar todo o código pertencente ao evento load nisso E se condição.

3. Crie as variáveis iniciais

Vamos criar mais três variáveis globais, s para o ângulo inicial do arco, tc para o id para o setInterval () cronômetro, e pct para o valor percentual do mesmo temporizador. O código tc = pct = 0 atribui 0 como o valor inicial para o tc e pct variáveis.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ;

Para mostrar como o valor de s foi calculado, deixe-me explicar rapidamente como ângulos do arco trabalhos.

Ângulos do arco

o ângulo subtendido (o ângulo composto dos dois raios que definem um arco) da circunferência de um círculo é 2π rad, Onde rad é o símbolo da unidade radiana. Isso faz com que o ângulo para um arco de um quarto igual a 0,5π rad.

IMAGEM: Wikipedia

Quando visualizando o progresso do carregamento, queremos que o círculo na tela seja desenhado da posição de topo em vez do direito padrão.

Indo no sentido horário (arco de direção padrão é desenhado na tela) da posição certa, o ponto principal é alcançado após três trimestres, isto é, em um ângulo de 1,5π rad. Assim, criei a variável s = 1,5 * Math.PI para depois denote o ângulo inicial para os arcos para ser desenhado na tela.

4. Estilize o círculo

Para o objeto de contexto de desenho, definimos o espessura da linha e strokeStyle propriedades do círculo vamos desenhar no próximo passo. o strokeStyle propriedade significa sua cor.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1,5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fúcsia'; ;

5. Desenhe o círculo

Nós adicionar um manipulador de eventos de clique para o botão Carregar [#lbtn] qual aciona um temporizador setInterval de 60 milissegundos, que executa a função responsável por desenhar o círculo [updateLoader ()] a cada 60ms até o círculo estar totalmente desenhado.

o setInterval () método retorna um id de timer para identificar o seu temporizador que é atribuído ao tc variável.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fúcsia'; btn.addEventListener ('clique', função () tc = setInterval (updateLoader, 60);); ;

6. Crie o `updateLoader ()` função personalizada

Está na hora de criar o costume updateLoader () função que é para ser chamado pelo setInterval () método quando o botão é clicado (o evento é acionado). Deixe-me mostrar-lhe o código primeiro, então podemos seguir com a explicação.

 function updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); if (pct === 100) clearInterval (tc); Retorna;  pct ++;

o clearRect () método limpa a área retangular da tela definido por seus parâmetros: as coordenadas (x, y) do canto superior esquerdo. o clearRect (0, 0, 16, 16) linha apaga tudo na tela de 16 * 16 pixels que criamos.

o beginPath () método cria um novo caminho para o desenho, e o acidente vascular encefálico() método pinta nesse caminho recém-criado.

No final de updateLoader () função, o contagem percentual [pct] é incrementado em 1, e antes do incremento nós verifique se é igual a 100. Quando é 100 por cento, o setInterval () cronômetro (identificado pelo id do timer, tc) está desmarcado com a ajuda do clearInterval () método.

Os três primeiros parâmetros do arco() método são os (x, y) coordenadas do centro do arco e seu raio. O quarto e quinto parâmetros representam o ângulos de início e fim em que o desenho do arco começa e termina.

Nós já decidimos o ponto de partida do círculo do carregador, que está no ângulo s, e será o mesmo em todas as iterações.

O ângulo final no entanto incremento com a contagem percentual, podemos calcular o tamanho do incremento Da seguinte maneira. Diga 1% (o valor 1 em 100) é equivalente ao ângulo α fora de 2π num círculo (2π = ângulo de toda a circunferência), então o mesmo pode ser escrito como a seguinte equação:

1/100 = α/ 2π

Ao reorganizar a equação:

 α = 1 * 2π / 100 α = 2π/ 100

Então, 1% é equivalente ao ângulo 2π/ 100 em um círculo. Assim, o ângulo final durante cada incremento percentual é calculado multiplicando 2π/ 100 pelo valor percentual. Então o resultado é Adicionado a s (ângulo de partida), então os arcos são tirado da mesma posição inicial toda vez. É por isso que usamos o pct * 2 * Math.PI / 100 + s fórmula para calcular o ângulo final no snippet de código acima.

7. Adicione o favicon

Vamos colocar um elemento de ligação favicon no HTML seção, diretamente ou via JavaScript.

No updateLoader () função, primeiro nós buscar o favicon usando o querySelector () método, e atribuí-lo ao lnk variável. Então precisamos exportar a imagem da tela cada vez que um arco é desenhado em uma imagem codificada usando o toDataURL () método e atribuir esse conteúdo de URI de dados como a imagem do favicon. Isso cria um favicon animado que é o mesmo que o carregador de tela.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "ícone"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fúcsia'; btn.addEventListener ('clique', função () tc = setInterval (updateLoader, 60);); ; function updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); if (pct === 100) clearTimeout (tc); Retorna;  pct ++;

Você pode dar uma olhada no código completo no Github.

Bônus: Use o carregador para eventos assíncronos

Quando você precisa usar essa animação de tela em conjunto com uma ação de carregamento em uma página da Web, atribua updateLoader () função como o manipulador de eventos para o progresso() evento da ação.

Por exemplo, nosso JavaScript vai mudar assim em AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "ícone"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fúcsia';  var xhr = new XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; function updateLoader (evt) ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (evt.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png');

No arco() método, substitua o valor percentual [pct] com o carregado propriedade do evento-denota quanto do arquivo foi carregado, e no lugar de 100 use o total propriedade do ProgressEvent, que denota o valor total a ser carregado.

Há não há necessidade de setInterval () em tais casos, como o progresso() evento é automaticamente demitido como o carregamento progride.