Icona animata di un timer con canvas e JavaScript

Di recente mi è capitato, per motivi di lavoro, di dovere includere in una pagina web varie icone a forma di timer che segnassero la durata in minuti di alcuni video. Fino a qui nulla di insolito, avrei preso il file vettoriale dell’icona creato dal grafico e spostato la lancetta dei minuti a seconda della durata che avrei voluto raffigurare per poi includerla nella pagina, vicino al video in questione.

Poi, pensando a come sarebbe venuta la pagina, hanno iniziato a sorgere i problemi:

  • I video incorporati sono più di uno e non conosco la durata di ognuno di essi a priori, ragion per cui dovrei salvare 60 png diversi (uno per ogni minuto), senza contare che dovrei approssimare l’icona al minuto, non considerando i secondi.
  • Il sito è stato creato con WordPress, le pagine che devono contenere le icone dei timer sono dinamiche, ma non solo: il cliente deve poter aggiungere autonomamente video, quindi timer.
  • Mi è stato richiesto espressamente qualche effetto di animazione sui componenti delle pagine del sito: i timer devono partire da 0 minuti al caricamento della pagina, per poi incrementare progressivamente il tempo segnato dalla lancetta dei minuti fino a fermarsi segnando la durata del video.
  • La grafica dell’icona è disegnata su misura per il sito, quindi l’idea di prendere qualche componente preconfezionato è da escludere.

Così ho pensato ad uno stratagemma reso possibile da Html5: il tag <canvas>!!

  • È un tag Html, quindi posso includerne quanti voglio nella pagina senza appesantirla più di tanto e una volta creato lo modifico a seconda dei minuti che voglio segnare.
  • Tramite uno shortcode o un pulsante nell’editor di WordPress, posso dare la possibilità ad un cliente a digiuno di codice di mostrarlo con facilità.
  • Posso animarlo mediante l’utilizzo di JavaScript.
  • Riproduco l’icona da codice così come è stata disegnata dal grafico nel file vettoriale.

Con il disegno, non me la cavo per niente bene, quindi l’opzione di farlo da codice un po’ mi tranquillizza, ma il timer è raffigurato come un orologio che è fondamentalmente un cerchio. Oltre che con il disegno, anche con la trigonometria sono veramente scarso, ma da quel che ricordo, per calcolare le coordinate all’interno del cerchio è fondamentale. Così guardando qualche blog che parla di matematica, trovo l’ispirazione e questo è il risultato:

See the Pen Animated timer canvas icon by MKay (@batysbase) on CodePen.17339

Come ho realizzato il timer

Con la funzione min2rad trasformo i minuti in radianti, necessari per calcolare la posizione della lancetta dei minuti e l’ampiezza dell’angolo dell’area evidenziata. Con la funzione baseClock disegno il cerchio che forma il quadrante del timer, mentre con la funzione useTime disegno le lancette delle ore e dei minuti, il centro del timer ed evidenzio la durata del video. Infine mediante il metodo setInterval incremento progressivamente il tempo di 0.2 minuti ogni millisecondo, fermando la progressione nel momento in cui raggiunge la durata prestabilita.

 

Personalizza e usa l’icona

L’icona risulta facilmente personalizzabile:

  • Agendo sull’attributo data-minutes del tag canvas, possiamo controllare dove si fermerà la lancetta dei minuti, mentre modificando gli attributi width e height, cambiamo le dimensioni dell’icona.
  • Il colore principale del timer si può cambiare agendo sulla variabile colMain dichiarata alla riga 1 del file JavaScript, così per il colore che evidenzia la durata, se minore e maggiore di un’ora, sulle variabili colDuration alla riga 2 e colDuration2 alla riga 3, colQuad e colHandle gestiscono i colori di quadrante e lancette.

Sentiti libero di utilizzare l’icona a tuo piacimento, modificandone il comportamento per adattarla alle tue esigenze. Ogni feedback o citazione nei ringraziamenti, qualora tu decida di utilizzarla nei tuoi progetti, saranno graditi, così anche ogni piccolo contributo per le spese.

Baty’s Base


Stai cercando prodotti per l’hacking, la sicurezza informatica e il penetration testing? Hai bisogno di bonificare il tuo smartphone, il tuo pc o il tuo sito da virus e malware? Devi rintracciare una persona o recuperare delle informazioni urgenti? Devi riprendere possesso di un account, una mail o di una password che ti hanno sottratto? Vuoi acquistare device già configurati per sperimentare tutte le tecniche di hacking in modo facile e veloce? Hai esigenze particolari in ambito software o hardware? Possiamo aiutarti!

Contattaci subito per avere un aiuto immediato : dettagliaci tramite mail o Whatsapp che tipo di supporto ti occorre e ti invieremo un riscontro immediato!

Compila e invia il modulo qui sotto per inviarci subito una richiesta di supporto

Scrivi il tuo indirizzo email qui

Scrivi qui come possiamo aiutarti - ti supportiamo immediatamente per ogni tua esigenza!

chevron_left
chevron_right