Genie animation Javascript?

Question

C'è un plugin jQuery o una libreria javascript che supporta un effetto di animazione "genio" come il dock Apple Mac OS X?

Bonus: libreria Actionscript? C/C++? .NETTO? Obiettivo C?

Answer 1

Non che io sappia. L'effetto 'genio' è una distorsione che non può essere raggiunta con i CSS: le trasformazioni CSS (incluso il filtro matrice di IE) ti danno il ridimensionamento su entrambi gli assi, rotazione e taglio. WebKit ti offre inoltre prospettive lineari. Le distorsioni curve come il genio non possono essere riprodotte con quegli strumenti.

Per farlo in JavaScript, devi dividere l'immagine (o un altro elemento se sei davvero ambizioso) in una riga per pixel e schiaccia orizzontalmente usando una trasformazione CSS. Sarebbe orribilmente inefficiente da rendere e probabilmente apparirebbe spasmodico, sfarfallio e spiacevolmente aliasato.

Answer 2

http://wonderfl.net/c/qnTR

http://swingpantsflash.com/genie_transition/genietransition.html

Answer 3

sono riuscito a riprodurre questo effetto con JS + CSS ... non è ancora finito, ma qui è un'anteprima dell'animazione in azione:

http://www.youtube.com/watch?v=UwUxo-R-mzU

Answer 4

Insipired dall'implementazione di Hakan, ho scritto la mia versione della libreria di transizioni Genie Effect.

Partenza https://github.com/kamilkp/geniejs

e http://kamilkp.github.io/ per demo.

Funziona su tutti i browser, incluso il cellulare (non sempre, tuttavia, su Firefox). Supporta transizioni Genie Effect in ogni direzione (in alto, in basso, a sinistra, a destra). Funziona anche se l'elemento html di destinazione è figlio di un contenitore con overflow automatico o nascosto. È una libreria agnostica, ma ho anche scritto un comodo plugin jQuery. E se nel tuo progetto includi anche la libreria html2canvas, il plugin ti consente di animare gli elementi HTML con effetto genie (esempio di espansione qui: http://kamilkp.co.nf/genie/canvas/)

L'unico requisito per il browser è che deve supportare le transizioni CSS. È una soluzione javascript + CSS pura.

Answer 5

Si può fare usando la pura trasformazione CSS, ma è molto più semplice usando SASS. L'idea generale è che si desidera convertire un rettangolo in un triangolo in modo uniforme (in modo che a metà strada si tratti di un trapezio). Il problema con questo è che qualsiasi trasformazione lineare trasformerà un rettangolo in un parallelogramma (un quad con tutti i lati paralleli) e vogliamo un triangolo. Ciò significa che abbiamo bisogno di una trasformazione non lineare. La buona notizia è che puoi eseguire trasformazioni non lineari fingendo che si tratti di trasformazioni in 3D e quindi proiettando il rettangolo sullo spazio dello schermo 2D. Pensa a un lungo marciapiede: sembra un triangolo. Quindi vogliamo ruotare il rettangolo e renderlo molto lungo.

Le trasformazioni per primo e l'ultimo fotogrammi chiave di animazione sono molto semplice quindi: la prima ha trasformazione di identità, e l'ultima è

-webkit-transform: matrix3d(
    1, 0, 0, 0, 
    0 , 1, 0, -9/$height, 
    0, 0, 1, 0, 
    0, 0, 0, 10 
); 

l'unica colonna interessante è l'ultima, che afferma che la distanza dal il visualizzatore dovrebbe essere 10 "per i pixel nella riga superiore e scendere a 10-9 = 1 per i pixel più in basso.

Il problema è con i fotogrammi intermedi in quanto l'algoritmo di interpolazione predefinito utilizzato dai browser tenta di interpretare le matrici come composizione di operazioni elementari come rotazioni e traduzioni e poi interpo cancella ogni operazione in modo indipendente. E poiché la nostra trasformazione finale assomiglia alla rotazione di 90 combinata con uno stiramento infinito, l'interpolazione proverà ad eseguire la rotazione e lo stretching simultaneamente, il che sembra strano, poiché uno di questi movimenti "è circolare" mentre l'altro "lineare" e la velocità del due non corrisponde.

Per compensare questo è possibile generare molti frame intermedi e per questo utilizzo SASS. Il risultato finale è qui: http://codepen.io/anon/pen/ApHkc

E la maggior parte del credito per questa soluzione dovrebbe andare all'autore http://persistent.info/web-experiments/distortion/ che mi ha convinto che questo è possibile. Inoltre, si noti che ci sono probabilmente molte trasformazioni diverse che trasformano un determinato rettangolo in un dato triangolo, che differiscono solo nel modo in cui sono mappati i loro interni - forse la mia soluzione non è la migliore in questo senso.