Animare un numero in Javascript da A a B

Se vogliamo creare una semplice animazione di un testo con un conteggio numero in Javascript, possiamo farlo tramite una piccola funzione, senza l’utilizzo di librerie apposite.

Nel nostro esempio avremo un testo “+300% margine lordo” che vorremmo animare a piacimento. Il nostro obiettivo è attivare il conteggio soltanto sulla parte numerica, partendo dalla stringa “+0% margine lordo” per poi scorrere a “%1 margine lordo”, “%2 margine lordo”.. insomma ci siamo capiti. Questa soluzione è SEO-friendly, in quanto nell’HTML della nostra pagina il testo finale è già presente e indicizzabile. Inoltre, permette anche una soluzione di fallback nel caso Javascript non possa essere eseguito o in errore.

Questa funzione che ho proposto su StackOverflow, accetta quattro parametri: l’oggetto, il numero di partenza (che di default è zero), il numero di arrivo (che di default è il numero contenuto nel testo originario, “300” nel nostro esempio) e la durata in millisecondi (di default 3000).

Andiamo a vedere come funziona.

HTML

<div id="value">+300% guadagno lordo</div>

JAVASCRIPT

function animateValue(obj, start = 0, end = null, duration = 3000) {
    if (obj) {

        // save starting text for later (and as a fallback text if JS not running and/or google)
        var textStarting = obj.innerHTML;

        // remove non-numeric from starting text if not specified
        end = end || parseInt(textStarting.replace(/\D/g, ""));

        var range = end - start;

        // no timer shorter than 50ms (not really visible any way)
        var minTimer = 50;

        // calc step time to show all interediate values
        var stepTime = Math.abs(Math.floor(duration / range));

        // never go below minTimer
        stepTime = Math.max(stepTime, minTimer);

        // get current time and calculate desired end time
        var startTime = new Date().getTime();
        var endTime = startTime + duration;
        var timer;

        function run() {
            var now = new Date().getTime();
            var remaining = Math.max((endTime - now) / duration, 0);
            var value = Math.round(end - (remaining * range));
            // replace numeric digits only in the original string
            obj.innerHTML = textStarting.replace(/([0-9]+)/g, value);
            if (value == end) {
                clearInterval(timer);
            }
        }

        timer = setInterval(run, stepTime);
        run();
    }
}

animateValue(document.getElementById('value'));

Ecco l’esempio in funzione: