Walk Cycle
SOLO HTML5 & CSS3
Vi ricordate il mio precedente articolo dove parlavo della lotta tra Flash e HTML5?
Beh, se consideriamo che non molti giorni fa una falla di sicurezza (Zero Day) in Flash è stata sfruttata per entrare nel sistema di una nota casa di software (Il programma più noto fornito da Hacking Team, si chiama Remote Controlling System anche noto come Galileo).
Di conseguenza Firefox e Chrome hanno bloccato disattivando il plug-in di flash sui loro browser, potremmo dire che HTML5 sta, ormai, vincendo quasi definitivamente!
Per informazione, Adobe, ha già rilasciato la patch correttiva per la sicurezza.
Controllate i vostri PC se avete installato l’aggiornamento.
DETTO QUESTO TORNIAMO A NOI:
WALK CYCLE CON HTML5 & CSS3.
Girovagando in rete, alla ricerca di tutorial e nuove tecniche da imparare, mi sono imbattuto in un esempio/tutorial veramente ben fatto: walking che voglio riproporre, in parte, anche nel mio sito, ribadendo che il merito e i diritti di copyright sono tutti dell’autore: Andrew Hoyer.
WALKING – CAMMINARE:
La necessità di sviluppare questa animazione nasce dalla motivazione di farla senza usare flash o Javascript o un mix di CSS3 e Javascript, ma usando solamente CSS3 e le proprietà:
La struttura viene composta da un insieme di “div” (contenitori) che formeranno lo scheletro. L’idea fondamentale dietro tutto questo è il fatto che una trasformazione CSS applicato ad un elemento padre si applica anche a tutti i suoi figli. Questo semplifica molto lo sviluppo dei movimenti non dovendo ricorrere a calcoli matematici per trovare le posizioni dei vari movimenti degli arti.
Questa la struttura dei div:
<div class="torso">
<div class="left-bicept">
<div class="left-forearm"></div>
</div>
<!-- /.left arm -->
<div class="right-bicept">
<div class="right-forearm"></div>
</div>
<!-- /.right arm -->
<div class="left-thigh">
<div class="left-shin">
<div class="left-foot">
<div class="left-toes"></div><!-- /.left-toes -->
</div>
<!-- /.left-foot -->
</div>
<!-- /.left-shin -->
</div>
<!-- /.left leg -->
<div class="right-thigh">
<div class="right-shin">
<div class="right-foot">
<div class="right-toes"></div><!-- /.right-toes -->
</div>
<!-- /.right-foot -->
</div>
<!-- /.right-shin -->
</div>
<!-- /.right leg -->
</div>
<!-- /.torso -->
Il tutorial continua ragionando sulla proprietà CSS z-index, questa proprietà specifica l’ordine in pila di un elemento (elemento che deve essere posto davanti o dietro, gli altri), per far muovere il braccio sx e la gambe dietro il tronco così come spostare, rispettivamente, gli stinchi e gli avambracci dietro le cosce e bicipiti.
“Questa non era la soluzione vincente, in quanto impostando z-index con valori negativi, non si otteneva l’effetto desiderato si può spingere solo un elemento figlio dietro il suo padre se suo padre non ha un z-index impostato. Questo significa che se ho impostato il z-index del bicipite sinistro a -1, non sarei mai in grado di muovere l’avambraccio sinistro dietro il bicipite sinistro.
Alla fine, ho scoperto che aggiungendo un po’ di più markup, era possibile risolvere tutti i problemi di cui sopra:
Struttura nuova
<div class="me">
<div class="torso">
<!-- group left leg -->
<div class="left-leg">
<div class="left-thigh">
<div class="left-shin">
<div class="left-foot">
<div class="left-toes"></div><!-- /.left-toes -->
</div>
<!-- /.left-foot -->
</div>
<!-- /.left-shin -->
</div>
<!-- /.left thigh -->
</div>
<!-- /.left-leg -->
<!-- group right leg -->
<div class="right-leg">
<div class="right-thigh">
<div class="right-shin">
<div class="right-foot">
<div class="right-toes"></div><!-- /.right-toes -->
</div>
<!-- /.right-foot -->
</div>
<!-- /.right-shin -->
</div>
<!-- /.right thigh -->
</div>
<!-- /.right-leg -->
<!-- /.group right leg -->
<!-- group left arm -->
<div class="left-arm">
<div class="left-bicept">
<div class="left-forearm"></div>
</div>
<!-- /.left-bicept
</div>
<!-- /.left arm -->
<!-- group right arm -->
<div class="right-arm">
<div class="right-bicept">
<div class="right-forearm"></div>
</div>
<!-- /.right-bicept
</div>
<!-- /.right arm -->
</div>
<!-- /.torso -->
</div>
<!-- /.me -->
Si noti che ho veramente solo cambiato due cose. In primo luogo ho avvolto ogni arto in un altro div, questa era la soluzione principale. Ho anche spostato la definizione dei bracci sotto le gambe. Avevo fatto originariamente questo al fine di assicurarsi che le braccia sarebbero sempre visualizzare sopra le gambe risparmiando così un po’ di CSS.
Animazione walk cycle:
Uno degli obiettivi di questo esperimento è stato quello di creare qualcosa che potesse lavorare molto bene su iPhone, iPad e iPod. Per fare questo, tutto quello che dovevo fare era assicurarmi di aver animato solo un certo sottoinsieme di proprietà. L’unica chiave è -webkit-transform (per la rotazione e traslazione).
Quando ho iniziato l’animazione, ho pensato che l’unica possibilità era quella di creare due animazioni diverse per ogni tipo di arto inferiore e posteriore. Così mi sono messo a lavorare solo cercando di animare un lato alla volta (ad esempio, il lato destro), e poi tradurlo verso l’altro, in modo che l’animazione venisse compensata del 50%. Così, per esempio, avrei potuto animare la gamba destra in modo tale che sarebbe partita davanti, quindi definire una seconda animazione quasi identica per il lato sinistro per far partire la gamba in posizione posteriore.
Questo è diventato fastidioso quando ho iniziato ad usare i fotogrammi chiave a percentuali strane (20%, 40%, 70%). Tradurre questo compensato da 50% a volte era difficile, e spesso con un aspetto orribile quando stavo provando con diverse funzioni di temporizzazione.
Alla fine ho scoperto che la proprietà -webkit-animation-delay accettata i valori negativi che consentono avviare un’animazione a un certo punto arbitrario. Così, per esempio, se ho il braccio destro oscillante con una durata di 2 secondi, ho potuto utilizzare la stessa animazione per il braccio sinistro, ma basta specificare il – webkit-animation-delay per essere -1 secondo.
Purtroppo, Safari mobile (nel 2010) evidentemente non è così ben attrezzata come suo fratello desktop. Vale a dire la mia soluzione -webkit-animazione-ritardo intelligente non ha funzionato affatto e le braccia e le gambe si muovevano all’unisono …
Così, dopo tutto quel lavoro per far funzionare le cose in modo così bello come una singola animazione, sono dovuto ritornare a fare animazioni diverse per il lato sinistro e destro. Anche se questa volta, per mantenere la mia sanità mentale, ho deciso di usare solo 0%, 25%, 50%, 75% e 100% come i miei fotogrammi chiave. Questo ha reso le cose belle e facili.”
Prendendo spunto dal suo esempio, ho riprodotto, con alcune modifiche, la mia animazione, modificando le posizioni degli arti, superiori e inferiori per adattare le loro posizioni alla struttura – dimensioni degli arti stessi, la velocità dei passi agendo sulle proprietà di posizionamento e movimento degli arti. Inoltre, per adattare l’animazione e il suo contenuto, ai vari device, ho creato un layout “responsive” con il framework “bootstrap” adattato alle mie esigenze e alcune regole per le media query di specifici layout.
HTML5 & CSS3: ci permettono di animare gli oggetti inseriti nelle pagine web senza una riga di javascript e senza l’uso di flash.
Ecco la mia animazione: Clicca qui
Grazie ancora ad Andrew Hoyer al quale va tutto il merito di questa animazione e per aver condiviso con tutti il suo lavoro.
Alla prossima
UmMawebdesign
