Corsi on-line

Animare elementi con ForceJS

ForceJS è una soluzione basata su JavaScript che permette di animare facilmente gli elementi di un pagina Web; l’applicazione funziona in modo nettamente diverso dalle librerie concepite fino ad ora per il medesimo scopo, essa infatti offre delle funzioni appositamente dedicate all’utilizzo delle transizioni CSS, motivo per il quale la quantità di risorse richiesta dovrebbe rivelarsi inferiore rispetto alle metodologie basate sulla scripting puro.

CatturaForseJS è stata concepita per prevedere i comportamenti dei browser Internet più datati o meno equipaggiati dal punto di vista delle feature e del supporto per gli standard Web più recenti; nel caso in cui un’applicazione per la navigazione in Rete non dovesse offrire compatibilità con le transizioni CSS la libreria farà ricorso alle funzioni native di JavaScript tramite una procedura automatizzata per il fallback.

ForceJS non necessita di alcun framework per il suo funzionamento, ma nel caso in cui lo sviluppatore desideri utilizzarla in associazione a soluzioni come jQuery la libreria sarà in grado di rilevare quest’ultimo e di estenderne gli oggetti tramite alcuni metodi dedicati. L’utilizzatore potrà configurare lo script per personalizzare le animazioni (fps, movimento, posizionamento iniziale e finale degli elementi..) valutandone l’impatto sul livello delle prestazioni.

Utilizzare la libreria è particolarmente semplice, basterà richiamare il file contente il codice dell’applicazione all’interno dei tag head o alla fine del tag body:

<script src="force.js" type="text/javascript"></script>

Fatto questo si potrà procedere con la chiamata alle funzioni; lo snippet proposto di seguito rappresenta un esempio di utilizzo della funzione force.move() che permetterà di determinare lo spostamento di un elemento in seguito ad un click specificandone anche la velocità in millisecondi:

var element = document.getElementBy('element-id');
// funzione applicata ad un oggetto
force.move(element, {left: 100px, top: 50px}, 1000);
// funzione applicata ad un selettore
force.move('#element-id', {left: 100px, top: 50px}, 1000);

Sarà possibile definire velocità e movimenti variabili, si tenga conto però che l’impiego massiccio delle transazioni potrebbe ripercuotersi negativamente sulle performance.

Via ForceJS

Post correlati
I più letti del mese
Tematiche