CSShake: animazioni di scuotimento

CSShake è un progetto interamente scritto in CSS che fornisce una serie di
animazioni di scuotimento applicabili praticamente a tutti gli elementi del DOM.
Certamente non fornisce un spettro di animazioni ampio come quelle fornite da altre librerie:
Animate.css, Magic Animations e DynCSS,
tuttavia il suo utilizzo non è da sottovalutare, e dovrebbe essere tenuto in
considerazione specialmente nello sviluppo di applicazioni web altamente interattive, per esempio i giochi online.
Su Github è disponibile il codice sorgente di CSShake.

Installazione e supporto

Per installare CSShake abbiamo diverse opzioni. La prima consiste nello scaricare il sorgente da Github.
Chi non dispone di Git può far riferimento alla nostra guida all'installazione.
Dopodichè, per scaricare il progetto in locale, eseguiamo il comando seguente:

git clone https://github.com/elrumordelaluz/csshake.git

La seconda opzione consiste nell'utilizzo del package manager Bower, la cui installazione è stata già spiegata nella nostra guida all'installazione.
Digitiamo dunque il comando per finalizzare l'installazione in locale:

bower install csshake

La terza opzione consiste nell'utilizzo di NPM.
In questo caso possiamo riferirci alla nostra guida
per maggiori informazioni su questo package manager. Una volta installato NPM, scarichiamo il pacchetto di CSShake:

npm i csshake

ed eseguiamo i comandi per terminare l'installazione:

npm run watch
npm run build:raw
npm run build:min

L'ultima opzione è adeguata nel caso in cui vogliamo dare semplicemente un'occhiata a CSShake
ed utilizzarlo velocemente all'interno di una pagina web di test. Per fare ciò, possiamo
scaricare il sorgente di ogni singola animazione da questa pagina web.

Utilizzo

Per prima cosa dobbiamo includere il foglio di stile radice csshake.css all'interno della nostra pagina web:

<link rel="stylesheet" type="text/css" href="csshake.css">

Dopodichè non rimarrà che assegnare la classe tipo-di-scuotimento all'elemento che intendete animare.
La seguente tabella contiene la lista completa delle classi che potremo assegnare:

Classe di scuotimento	Descrizione
shake	Movimento in tutte le direzioni
shake-hard	Movimento ad alta velocità
shake-slow	Movimento a bassa velocità
shake-little	Movimento con piccole traslazioni
shake-orizontal	Movimento solo in direzione orizzontale
shake-vertical	Movimento solo in direzione verticale
shake-rotate	Movimento rotazionale attorno al centro dell'oggetto da animare
shake-opacity	Movimento con "lampeggiamento" dell'oggetto animato
shake-crazy	Movimento completamente casuale
shake-chunk	Movimento a "scatti"

Potremo inoltre aggiungere una serie di controlli atti a manipolare il
comportamento dell'animazione dopo un evento di tipo "hover".
In particolare potremo:

• mettere in pausa l'animazione dopo l'hover:
  

  <div class="shake shake-freeze"></div>

• lasciare l'animazione attiva, indipendentemente dall'hover:
  

  <div class="shake-chunk shake-constant"></div>

• stoppare del tutto l'animazione dopo l'hover:
  

  <div class="shake-slow shake-constant shake-constant--hover"></div>

La classe speciale shake-trigger può essere inoltre assegnata a contenitori
(per esempio ad elementi div e span), per consentire l'animazione simultanea
di tutti gli elementi contenuti al loro interno:

<div class="shake-trigger">
 <div class="shake-slow"></div>
<div class="shake-hard"></div>
<div class="shake"></div>
</div>

Possiamo dare un'occhiata approfondita a tutte le potenzialità di CSShake
a questa pagina web, contenente una demo illustrativa.

Personalizzazione

È possibile definire le proprie animazioni creando una classe personalizzata.
Per fare ciò sarà sufficiente importare la funzione do-shake e assegnarle
i parametri necessari per la generazione dell'animazione di scuotimento:

.mia_classe_scuotimento {
  @include do-shake(
        $name: 'mia_classe_scuotimento',
        $h: 3px,
        $v: 3px,
        $r: 45deg,
        $dur: 10ms,
        $precision: .01,
        $opacity: false,
        $q: infinite,
        $t: ease-in-out,
        $delay: 3ms,
        $chunk: 70%);
}

Ciascuno dei parametri indicati ha un valore di default, indicato dopo il carattere ":". I parametri assumono
il seguente significato:

• $name: è una stringa che rappresenta il nome per l'animazione;
• $h: è un numero (espresso in pixel o percentuale) che rappresenta l'escursione massima dell'animazione lungo l'asse X;
• $v: è un numero (espresso in pixel o percentuale) che rappresenta l'escursione massima dell'animazione lungo l'asse Y;
• $r: è un numero (espresso in deg) e rappresenta la rotazione massima fornita dall'animazione;
• $dur: rappresenta la durata (espresso in millisecondi) dell'animazione;
• $precision: è un numero che indica la granularità dell'animazione, e influenza il numero di passi eseguiti dall'animazione stessa (va da 0.01 ad 1);
• $opacity: è un valore booleano che indica se l'opacità può essere randomizzata ;
• $q: è una stringa che indica quante volte ripetere l'animazione;
• $t: il nome della funzione di temporizzazione;
• $delay: è un numero (espresso in millisecondi) che indica dopo quanto tempo far partire l'animazione;
• $chunk: è un numero (espresso in percentuale) che indica a quanti keyframes deve essere applicata
  l'animazione (100% indica l'applicazione dell'animazione a tutti i keyframes).

Una animazione di esempio potrebbe essere la seguente:

.shake-infinitely {
	@include do-shake('shake-infinitely', 50, 50, 20, 200ms, .2, $opacity: true, $q:infinite, $chunk:50%);
}

La funzione do-shake è la funzione di generazione delle animazioni di scuotimento che applica
una "randomizzazione guidata" dai parametri forniti in ingresso (cioè quelli sopra elencati).
La sua implementazione può essere analizzata più in dettaglio dando un'occhiata al suo codice
sorgente, descritto a questa pagina web