Animazione circolare

23 mag 2010    No Comments    Categoria: Plugins

Chris Coyier presenta un plugin per jQuery 1.4 per effettuare animazioni circolari: Circulate.

E’ necessaria la versione 1.4 di jQuery in quanto viene utilizzato il nuovo metodo .animate().
Ciò consente di effettuare animazioni diverse su assi diversi, grazie anche al plugin Easing.
L’idea di base è riassunta nella seguente immagine:

Quindi, se eseguiamo in quattro momenti diversi, lanciando le funzioni di easing e, se necessario, aggiungendo o sottraendo possiamo ottenere un cerchio.

E non solo sarà possibile ottenere un cerchi, ma ogni ellisse definito da una altezza e una larghezza.

Caratteristiche

È possibile, come ovvio, dichiarare la velocità, l’altezza e larghezza.
Ci sono però altri tre parametri configurabili:

• SizeAdjustment: un adeguamento percentuale. Il valore predefinito è 100 (rimane lo stesso). Un valore inferiore a 100 restringe a tale percentuale il punto di mezzo, mentre un valore superiore a 100 fa aumentare a tale percentuale il punto di mezzo;
• Loop: valore predefinito è false. True significa che il ciclo verrà eseguito in modo ricorsivo. È possibile interrompere un loop di corrente chiamando il plugin su tale elemento, cioè $(“#elemento”).circulate(“stop”);
• ZIndexValue: accetta un array di quattro valori numerici. Questi valori impostano la proprietà CSS z-index in ciascuno dei quattro punti di animazione.

Ecco il set completo:

$("#elemento).circulate({
    speed: 400,                  // Velocità di ciascun quarto di segmento di animazione 1000 = 1 secondo
    height: 200,                 // Distanza verticale del percorso
    width: 200,                  // Distanza orizzontale del percorso
    sizeAdjustment: 100,         // Percentuale di restingimento e/o allungamento
    loop: false,                 // Animazione continua
    zIndexValues: [1, 1, 1, 1],  // Valori z-index per ciascuno dei quattro punti di animazione
});

Il plugin è ancora in fase di beta in quanto non funziona molto bene su Opera ed anche perché l’autore vorrebbe apportare alcune modifiche (per esempio un parametro di callback) e scrivere in maniera più efficiente il plugin stesso.

Download

Sito autore: http://chriscoyier.net/
Demo: http://css-tricks.com/examples/Circulate/