Cómo crear un cargador de Favicon animado con JavaScript

Favicons son una parte crucial de la marca en línea, dar una señal visual a los usuarios, y ayudarles distinguir su sitio de otros. Aunque la mayoría de los favicons son estáticos, es posible crear favicons animados también.

Un favicon en constante movimiento es ciertamente molesto para la mayoría de los usuarios, y también perjudica la accesibilidad, sin embargo, cuando se anima solo por un corto tiempo en respuesta a una acción del usuario o un evento de fondo, tal como una carga de página, puede proporcionar información visual adicional-por lo tanto mejorando la experiencia del usuario.

En este post, te mostraré cómo crear un Cargador circular animado en un lienzo HTML, Y como puedes usarlo como un favicon. Un cargador de favicon animado es una gran herramienta para Visualiza el progreso de cualquier acción. realizado en una página, como la carga de archivos o el procesamiento de imágenes. Puedes echar un vistazo a la demo perteneciente a este tutorial en Github también.

1. Crea el elemento

Primero, necesitamos crear una animación de lienzo ese Dibuja un círculo completo, 100 por ciento en total. (Esto será importante cuando necesitamos incrementar el arco).

 Carga  

Estoy usando el tamaño de favicon estándar, 16 * 16 píxeles, para el lienzo. Puede usar un tamaño mayor que eso si quiere, pero tenga en cuenta que la imagen del lienzo será reducido a los 16² área de píxeles cuando se aplica como un favicon.

2. comprobar si esta apoyado

Dentro de onload () manejador de eventos, nosotros obtener una referencia para el elemento canvas ElCV] utilizando la querySelector () método, y se refieren su objeto de contexto de dibujo 2D Elctx] con la ayuda de la getContext () método.

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

También tenemos que comprobar si el lienzo es soportado por el UA asegurándose de que el objeto de contexto de dibujo [ctx] existe y no está indefinido. Colocaremos Todo el código que pertenece al evento de carga. dentro de esto Si condición.

3. Crea las variables iniciales.

Vamos a crear tres variables mas globales, s Para el ángulo inicial del arco, tc Para el identificación para el setInterval () minutero, y pct Para el valor porcentual del mismo temporizador. El código tc = pct = 0 asigna 0 como el valor inicial Para el tc y pct variables.

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

Para mostrar cómo el valor de s fue calculado, déjame explicarte rápidamente como ángulos de arco trabajo.

Angulos de arco

los ángulo subtendido (el ángulo compuesto por los dos rayos que definen un arco) de la circunferencia de un circulo es 2π rad, dónde rad es el símbolo de la unidad de radianes. Esto hace que el ángulo para un cuarto de arco igual a 0.5π rad.

Cuando visualizando el progreso de carga, Queremos dibujar el círculo sobre el lienzo. desde la posición superior en lugar del derecho por defecto.

Ir en el sentido de las agujas del reloj (el arco de dirección por defecto se dibuja en el lienzo) desde la posición correcta, el punto superior es alcanzado después de tres cuartos, es decir, en un ángulo de 1.5π rad. Por lo tanto, he creado la variable s = 1.5 * Math.PI para después denota el ángulo de inicio de los arcos para ser dibujado desde el lienzo.

4. Estilo del círculo

Para el objeto de contexto de dibujo, definimos la grosor de línea y estilo de trazo propiedades del circulo Vamos a dibujar en el siguiente paso. los estilo de trazo La propiedad representa su color..

 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 = 'fuchsia'; ; 

5. Dibuja el círculo.

Nosotros agregar un controlador de eventos de clic al botón de carga [#lbtn] cual activa un temporizador setInterval de 60 milisegundos, que ejecuta la función responsable de dibujar el círculo [updateLoader ()] cada 60ms hasta que el círculo esté completamente dibujado.

los setInterval () método devuelve un ID de temporizador para identificar su temporizador que se asigna a la tc variable.

 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 = 'fuchsia'; btn.addEventListener ('clic', función () tc = setInterval (updateLoader, 60);); ; 

6. Crea el updateLoader () función personalizada

Es hora de crear la costumbre. updateLoader () función que es ser llamado por el setInterval () método cuando se hace clic en el botón (se activa el evento). Permítame mostrarle el código primero, luego podemos continuar con la explicación.

 función 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); regreso;  pct ++;  

los clearRect () método Despeja el área rectangular del lienzo. definido por sus parámetros: las coordenadas (x, y) de la esquina superior izquierda. los clearRect (0, 0, 16, 16) línea borra todo En el lienzo de 16 * 16 píxeles que hemos creado..

los beginPath () método crea un nuevo camino para el dibujo, y la carrera() método pinta en ese camino recién creado.

Al final de updateLoader () función, la porcentaje de conteo [pct] se incrementa en 1, y antes del incremento nosotros Compruebe si es igual a 100. Cuando es 100 por ciento, el setInterval () minutero (identificado por el ID del temporizador, tc) se borra con la ayuda del clearInterval () método.

Los tres primeros parámetros de la arco() método son los (x, y) coordenadas del centro del arco. y su radio. Los parámetros cuarto y quinto representan la ángulos de inicio y fin En el que comienza y termina el dibujo del arco..

Ya decidimos el punto de inicio del círculo del cargador, que está en el ángulo s, y será el Lo mismo en todas las iteraciones..

El ángulo final sin embargo será incrementa con el conteo porcentual, podemos calcular el tamaño del incremento de la siguiente manera. Decir 1% (el valor 1 de 100) es equivalente al ángulo α de 2π en un círculo (2π = ángulo de toda la circunferencia), entonces se puede escribir lo mismo como la siguiente ecuación:

1/100 = α/ 2π

Al reordenar la ecuación:

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

Entonces, 1% es equivalente al ángulo 2π/ 100 en un círculo. Por lo tanto, el ángulo final durante cada incremento porcentual es calculado multiplicando 2π/ 100 por el valor porcentual. Entonces el resultado es añadido a s (ángulo inicial), entonces los arcos son dibujado desde la misma posición de partida cada vez. Por eso usamos el pct * 2 * Math.PI / 100 + s fórmula para calcular el ángulo final en el fragmento de código anterior.

7. Agrega el favicon

Vamos a colocar un elemento de enlace favicon en el HTML sección, ya sea directamente oa través de JavaScript.

En el updateLoader () función, primero nosotros trae el favicon utilizando la querySelector () método, y asignarlo a la lnk variable. Entonces necesitamos exportar la imagen del lienzo cada vez que se dibuja un arco en una imagen codificada usando el toDataURL () método, y Asignar ese contenido URI de datos como la imagen de favicon. Esto crea un favicon animado que es el igual que el cargador de lona.

 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 = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('clic', función () tc = setInterval (updateLoader, 60);); ; función 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); regreso;  pct ++;  

Puedes echar un vistazo al código completo. en Github.

Bonus: Usa el cargador para eventos asíncronos

Cuando necesites usar este lienzo de animación. en conjunción con una acción de carga en una página web, asigne la updateLoader () función como el controlador de eventos para el Progreso() evento de la acción.

Por ejemplo, nuestro JavaScript cambiará así. en AJAX:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia';  var xhr = nuevo XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; función 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');  

En el arco() método, reemplazar el valor de porcentaje [pct] con el cargado propiedad del evento-denota la cantidad del archivo que se ha cargado, y en lugar de 100 utilizar el total propiedad de ProgressEvent, que denota la cantidad total a cargar.

Hay sin necesidad de setInterval () en tales casos, como el Progreso() evento es despedido automáticamente a medida que avanza la carga.