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 tagcanvas
, possiamo controllare dove si fermerà la lancetta dei minuti, mentre modificando gli attributiwidth
eheight
, 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 variabilicolDuration
alla riga 2 ecolDuration2
alla riga 3,colQuad
ecolHandle
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.