Between.js: interpolare immagini con JavaScript

Between.js è uno script Javascript utile alla produzione dei cosiddetti "tweening", o interpolazione di animazioni. Con il termine tween si intende la produzione di un'animazione (in questo caso in ambito HTML+CSS) basata sull'alterazione delle proprietà di stile di un elemento ad una data velocità in un dato lasso di tempo e con una data easing equation.

Ispirato dalla famosa libreria Javascript per animazioni Tween.js, con cui condivide una parte di nome, come dichiarato dall'autore nella pagina di presentazione del progetto, a differenza del primo mira ad essere conforme ad i moderni standard ECMA6 e permette di interpolare variabili di tipo diverso, come oggetti, array, numeri e stringhe e non unicamente gli oggetti.

Le sue caratteristiche generali:

• standalone, non necessita di altri script o dipendenze per essere utilizzato, ad eccezione dei plug-in per le animazioni delle stringhe di colori, come dom-color.js;
• peso molto ridotto: 9kb nella versione non compressa e 3kb nella versione gzippata;
• conforme agli standard ECMA6 e compatibile con gli standard ECMA5;
• possibilità di animare più proprietà (colori compresi) ed utilizzare differenti tipi di variabili.

L'utilizzo base di Between.js segue quello di ogni procedura HTML classica per l'aggiunta di script esterni. Avremo dunque semplicemente occorrenza di inserire lo script:

<script src="https://rawgit.com/sasha240100/between.js/master/build/between.js"></script>

ed iniziare a lavorare con la sue API:

new Between(1, 10).time(1000)
.on('update', (value) => {
console.log(value);
});

Le API di Between.js sono molto ben documentate nella sua pagina Github, e consentono di impostare ogni singolo dettaglio dell'animazione:

// Constructor
new Between(
[Number|Object|Array] from,
[Number|Object|Array] to
)
// Methods
.time([Number] duration) // Set duration
.loop([String] mode, [?Number] repeatTimes) // Set loop mode, if "repeatTimes" is falsy, treats as "endless"
.easing([Function] easing) // Set easing function
.on([String] eventName, [Function] callback) // Add event listener
.pause() // Pauses
.play() // Resumes
// Getters
.isPaused // returns true if paused

Anche le API riguardanti la gamma di eventi che è possibile gestire durante l'interpolazione sono nutrite, e permettono di controllare ogni fase della transizione:

new Between(1, 10).time(1000)
.on('update', (value) => {
console.log(value);
})
.on('start', (value) => {
console.log(value);
})
.on('pause', (value) => {
console.log(value);
})
.on('play', (value) => {
console.log(value);
})
.on('complete', (value) => {
console.log(value);
});

Between.js.org ci mostra una collezione di demo funzionanti con cui possiamo vedere cosa è possibile produrre grazie allo snippet.