Cómo crear un cargador de Favicon animado con JavaScript

Favicons son una parte crucial de la marca en línea, ellos dar una señal visual a los usuarios y ayudarlos distinguir tu 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 solo está animado por un corto tiempo en respuesta a una acción del usuario o un evento en segundo plano, como una carga de página, puede proporcionar información visual adicional—Por lo tanto, mejora la experiencia del usuario.

Hablemos de la importancia de los favicons

Hablemos de la importancia de los favicons

Los veteranos de negocios en línea saben que son las pequeñas cosas las que diferencian a una empresa de la competencia. Los novatos … Lee mas

En esta publicación, te mostraré cómo crear un cargador circular animado en un lienzo HTMLy cómo puedes usarlo como favicon. Un cargador de favicon animado es una gran herramienta para visualizar 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.

Demo de Canvas Loader Gif

1. Crear 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 necesitemos incrementar el arco).



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

2. Compruebe si esta apoyado

Dentro de onload() controlador de eventos, nosotros obtener una referencia para el elemento de lienzo (cv) utilizando la querySelector() método, y referir su objeto de contexto de dibujo 2D (ctx) con la ayuda de getContext() método.

onload = function() {
    cv = document.querySelector('#cvl'),
    ctx = cv.getContext('2d');

    if (!!ctx) {
        /* ... */
    }
};

También necesitamos verificar si el lienzo es compatible con el UA asegurándose de que el objeto de contexto de dibujo (ctx) existe y no está indefinido. Colocaremos todo el código perteneciente al evento de carga dentro de esto if condición.

15 Métodos JavaScript para la manipulación DOM para desarrolladores web

15 Métodos JavaScript para la manipulación DOM para desarrolladores web

Como desarrollador web, con frecuencia necesita manipular el DOM, el modelo de objetos que utiliza … Lee mas

3. Crear las variables iniciales

Vamos a crear tres variables globales más, s Para el ángulo inicial del arco, tc Para el id para el setInterval() Temporizadory 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 cómo ángulos de arco trabajo.

Ángulos de arco

los ángulo subtendido (el ángulo compuesto por los dos rayos que definen un arco) de la circunferencia de un círculo 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.

ángulo de circunferencia pretendido

Cuando visualizar el progreso de carga, queremos que se dibuje el círculo en el lienzo desde la posición superior en lugar del derecho predeterminado.

Yendo en sentido horario (el arco de dirección predeterminado 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 denotar el ángulo inicial para los arcos para ser dibujado en el lienzo.

4. Dale estilo al círculo

Para el objeto de contexto de dibujo, definimos el lineWidth y strokeStyle propiedades del círculo vamos a dibujar en el siguiente paso. los strokeStyle 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 Carga botón (#lbtn) cuales activa un temporizador setInterval de 60 milisegundos, que ejecuta la función responsable de dibujar el círculo (updateLoader()) cada 60 ms hasta que el círculo esté completamente dibujado.

los setInterval() método devuelve una identificación del 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('click', function() {
            tc = setInterval(updateLoader, 60);
        });
    }
};

6. Crear el updateLoader() función personalizada

Es hora de crear la costumbre updateLoader() función que debe ser llamado por el setInterval() método cuando se hace clic en el botón (se activa el evento). Déjame mostrarte el código primero, luego podemos seguir con la explicación.

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);
        return;
    }

    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 el stroke() método pinta en esa ruta recién creada.

Al final de updateLoader() función, el recuento porcentual (pct) se incrementa en 1, y antes del incremento nosotros comprobar si es igual a 100. Cuando es 100 por ciento, el setInterval() Temporizador (identificado por la identificación del temporizador, tc) está despejado con la ayuda de clearInterval() método.

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

Ya decidimos el punto de partida del círculo del cargador, que está en ángulo sy será el lo mismo en todas las iteraciones.

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

1/100 = α/2π

Al reorganizar 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 extraído de la misma posición inicial 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. Añade el favicon

Coloquemos un elemento de enlace favicon en el HTML sección, ya sea directamente o mediante JavaScript.


En el updateLoader() función, primero nosotros buscar el favicon utilizando la querySelector() método y asígnelo al lnk variable. Entonces necesitamos exportar la imagen del lienzo cada vez que se dibuja un arco en una imagen codificada mediante el uso de toDataURL() método y asignar ese contenido de URI de datos como la imagen favicon. Esto crea un favicon animado que es el igual que el cargador de lienzo.

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('click', function() {
            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);
        return;
    }

    pct++;
}

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

Bonificación: use el cargador para eventos asíncronos

Cuando necesitas usar esta animación de lienzo junto con una acción de carga en una página web, asigne el updateLoader() función como el controlador de eventos para el progress() 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 = 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');
}

En el arc() método, reemplace el valor porcentual (pct) con el loaded propiedad del evento: Indica cuánto del archivo se ha cargado y en lugar de 100 utilizar el total propiedad del ProgressEvent, que denota la cantidad total a cargar.

Hay no hay necesidad de setInterval() en tales casos, como el progress() el evento es disparado automáticamente a medida que avanza la carga.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *