CharWriter.js: Animazioni Stile 'Macchina da Scrivere' in Vanilla JavaScript

Pochi giorni fa ho aperto un repository pubblico su GitHub per condividere del codice JavaScript appena rifattorizzato, oggi mi piacerebbe presentartelo. CharWriter è una modesta classe JavaScript ES6 le cui istanze sono in grado di inserire, cancellare e sostituire del testo contenuto in un tag HTML animando l'operazione in stile 'macchina da scrivere'.

Esaminalo su GitHub

Per rendere l'animazione più realistica, il ritmo di battitura non è così regolare come ci si aspetterebbe da una semplice concatenazione di caratteri, tutt'altro: i caratteri vengono digitati più o meno velocemente in base al loro tipo (maiuscolo, spazio, numero, e così via). Ma devo appuntare che nonostante il mio tentativo di contaminare l'animazione con tratti del fattore umano, la natura dello script è in ogni caso semplice, e in quanto tale questo resta ancorato alla prevedibilità del mondo virtuale.

Type, Delete, ReplaceWith ... Stop

La classe CharWriter include quattro autoesplicativi metodi pubblici:

  • CharWriter::type( text, callback, delay ) digita nel tag HTML target il valore di text ricevuto in input, eseguendo la callback facoltativa ad animazione terminata. delay è un argomento facoltativo attraverso cui puoi comunicare al metodo dopo quanti millisecondi dal termine dell'animazione deve essere eseguita la callback.
  • CharWriter::delete( callback, delay ) anima la cancellazione del contenuto testuale del tag HTML target. I due argomenti facoltativi hanno la stessa funzione degli omonomi argomenti del metodo CharWriter::type().
  • CharWriter::replaceWith( text ) sostituisce il contenuto testuale del tag HTML target con il valore di text ricevuto in input, animando sia l'operazione di cancellazione che quella di inserimento del testo.
  • CharWriter::stop( haltDelay, callback ) interrompe l'animazione in esecuzione dopo un numero opzionale di millisecondi definito da haltDelay. callback è la funzione facoltativa che deve essere eseguita una volta che l'animazione in corso è stata interrotta.

Un Esempio

Il codice che segue mostra come partendo da un oggetto CharWriter puoi fare in modo che questo prima digiti del testo nel tag HTML target, e successivamente sostituisca il testo digitato quando il tag HTML target viene cliccato:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CharWriter Example</title>
    <script src="charwriter.js"></script>
</head>

<body>
<p id="text"></p>

<script>
// L'animazione inizia quando il documento è stato caricato completamente.
window.addEventListener( 'load', () => {
    // Gli oggetti CharWriter devono essere inizializzati con l'attributo ID
    // del tag HTML target — 'text' nel nostro esempio.
    const writer = new CharWriter( 'text' );
    
    // Funzione chiamata quando il nodo target viene cliccato.
    let startReplacing = ( event ) => {
        // All'animazione 'replaceWith' viene concessa una sola esecuzione.
        event.target.removeEventListener( 'click', startReplacing );
        
        writer.replaceWith( 'Lorem ipsum dolor sit amet, 1 Jan 2022, consectetur adipisicing elit ...' );
    };

    // Funzione chiamata quando l'animazione 'type' è terminata.
    let addClickEvent = () => writer.target.addEventListener( 'click', startReplacing );

    // L'animazione 'type' inizia 1 secondo dopo il caricamento del documento.
    setTimeout( () => writer.type( 'Click to replace this text.', addClickEvent ), 1000 );
} );
</script>
</body>
</html>