Animare una tenda con Spritely

Pubblicato da Nicola Rainiero il 07-08-2012 (aggiornato il 26-11-2018)

In questo tutorial spiegherò come ricreare l'effetto del vento su di una tenda, per utilizzarlo poi come sfondo sulla testata di un sito che sto aggiornando. Dosando opportunamente le sfumature del tendaggio, le ombre e l'ondulazione nella parte terminale si riesce a simulare un discreto movimento che nonostante alcune sbavature rende più dinamico il layout della pagina.

Ebbene si, non ho resistito e in questo periodo di ferie e calura sto tentando di aggiornare il mio vecchio sito sulla Legione Romana per portarlo in Drupal sfruttando quanto ho appreso e realizzato negli ultimi mesi. Questa animazione la volevo già inserire nella prima versione che era realizzata in Flash, ma il file SWF finale era troppo pesante e scadente così ho desistito.

Invece Spritely mi ha permesso con pochi passaggi e con due file PNG (realizzati interamente con Inkscape, 9 kB in tutto!) di superare tutti gli ostacoli precedenti. Per prima cosa mi sono munito di carta e penna e ho abbozzato l'animazione. Riporto una parte dello schizzo (la più comprensibile) quindi figuratevi le altre!

Schizzo utile per realizzare l'animazione di una tenda con Spritely

Nella bozza si vedono le due parti che costituiranno i rispettivi PNG:

  1. il tessuto della tenda definito da una sfumatura che si inscurisce o schiarisce a seconda della piegatura rispettivamente verso l'interno o l'esterno;
  2. la parte terminale dove a predominare è l'ondulazione e l'ombra sullo sfondo (non pianificata inizialmente).

La tenda

Sono partito dal colore dello sfondo originale e dosando il gradiente lineare ho riempito i 4 frame che costituiscono l'animazione vera e propria. Per aver un maggiore controllo li ho ulteriormente divisi a metà, ma solo per una migliore interazione e modellazione con la parte terminale.

Per il tessuto della tenda (sfondo.png)
DISEGNO QUOTATODISEGNO FINITO

La parte terminale

 Questa animazione mi ha impegnato maggiormente, soprattutto la modellazione e la scelta degli effetti, ma il risultato finale ne è valso la pena:

Per la parte terminale della tenda (parte_dorata.png)
DISEGNO QUOTATODISEGNO FINITO

Questi invece sono i passaggi più significativi con Inkscape:

Modellazione con Inkscape
Disegno dei rettangoliAssemblaggio

Conversione in bitmap dell'assemblaggio (Modifica --> crea una copia Bitmap);

effetto ondulazione sul bitmap (Estensioni --> Bitmap --> Ondulazione...)


Sovrapposizione con parte del tendaggio superiore
Riconversione in vettoriale (Tracciato --> Vettorizza bitmap - opzione colori)
Aggiunta dell'ombra (Filtri --> Ombre e aloni --> Proietta ombra...)

Inserimento in Drupal

Senza ripetere quanto descritto nell'articolo Spezza la monotonia con spritely! riporto quanto ho aggiunto in style.css e page.tpl.php.

In style.css

        #stage { 
            top: 0px; 
            left: 0px; 
        } 
        .stage { 
            position: absolute; 
            top: 0px; 
            left: 0px; 
            width: 100%; 
            min-width: 100%; 
            height: 100px; 
            overflow: hidden; 
        } 
        #sfondo { 
            position: absolute; 
            top: 0px; 
            left: 0px;                     
            
			width: 100px; 
			height: 100px; 
			 
            background: transparent url(../images/sfondo.png) repeat; 
        } 
	#stage_finale { 
            top: 100px; 
            left: 0px; 
        } 
	.stage_finale { 
            position: absolute; 
            top: 0; 
            left: 0px; 
            width: 100%; 
            min-width: 100%; 
            height: 75px; 
            overflow: hidden; 
        } 
        #finale_sfondo { 
            position: absolute; 
            top: 0; 
            left: 0px; 
            z-index: 1;                 
			width: 100px; 
			height: 75px; 
			 
            background: transparent url(../images/parte_dorata.png) repeat; 
        }

In page.tpl.php (l'ho inserito dopo <div id="page-wrapper"><div id="page"> per poter avere lo sfondo a tutta pagina)

<script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $('#sfondo').sprite({fps: 1, no_of_frames: 4}); 
            });
                })(jQuery);
        (function($) {
            $(document).ready(function() {
                $('#finale_sfondo').sprite({fps: 1, no_of_frames: 4}); 
            });
                })(jQuery);		
    </script>

<div id="contenitore_spritely">
    <div id="stage" class="stage">
        <div id="sfondo" class="stage"></div>
     </div>
    <div id="stage_finale" class="stage_finale">
	<div id="finale_sfondo" class="stage_finale"></div>
    </div>
</div>

Lo si può vedere in funzione direttamente nel sito della Legione Romana e qui sotto (ho riportato solo la parte terminale cambiando il percorso dell'immagine e i descrittori per non avere dei doppioni):

Questo è il codice:

<!-- ######## ANIMAZIONE CON SPRITELY ######## -->
<style type="text/css">
	#terminale { 
            top: 0px; 
            left: 0px; 
        } 
	.terminale { 
            position: absolute; 
            top: 0; 
            left: 0px; 
            width: 100%; 
            min-width: 100%; 
            height: 75px; 
            overflow: hidden; 
        } 
        #terminale_sfondo { 
            position: absolute; 
            top: 0; 
            left: 0px; 
            z-index: 1;                 
			width: 100px; 
			height: 75px; 
			 
            background: transparent url(http://rainnic.altervista.org/sites/default/files/styles/large/public/images/parte_dorata.png) repeat; 
        }
</style>

 <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $('#terminale_sfondo').sprite({fps: 1, no_of_frames: 4}); 
            });
                })(jQuery);		
    </script>

<div>
    <div id="terminale" class="terminale">
	<div id="terminale_sfondo" class="terminale"></div>
    </div>
</div>
<!-- ######## ANIMAZIONE CON SPRITELY ######## -->



Potrebbero interessarti anche:

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.

Commenti

Davvero carino. Secondo me però devi aumentare il framerate e la risoluzione dei tendaggi (più immagini e più piccole). Infatti l'effetto c'è ma si nota poco. 

Grazie per i consigli, in effetti l'avevo realiazzato in economia, temendo di generare due PNG pesanti e lenti da caricare. Quando avrò un po' di tempo realizzerò un unico PNG con una migliore risoluzione e più frame.