Come creare animazioni con HTML5

tramite: O2O
Difficoltà: media
14

Introduzione

Dalla sua nascita, il linguaggio HTML ha subito diverse modifiche e miglioramenti che, col passare del tempo, l'hanno portato alla sua ultima versione: ovvero l'HTML5. Inizialmente HTML veniva usato per la creazione di siti web statici e anche molto spartani in quanto non accettava e soprattutto non sopportava molti dei comandi che adesso vengono usati normalmente. Notevoli sono le migliorie rispetto alla versione precedente e, sicuramente, tra le più importanti troviamo l'introduzione dei tag "video" e "audio" e quella del Canvas che permette, tramite Javascript, di creare animazioni e grafica bitmap. Il Canvas non è altro che una regione disegnabile, definita in codice HTML con gli attributi "height" and "width". Lo Javascript, invece, consentirà l'accesso all'area di disegno con un set completo di funzioni, utili per la generazione dinamica di disegni. In questa guida andremo a vedere quali sono i metodi a nostra disposizione per creare animazioni in HTML5. Vediamo come fare.

24

Il primo è quello gratuito ma anche il più complicato. Si tratta di scrivere l'animazione esclusivamente tramite codice. Per fare ciò, bisogna avere delle basi del linguaggio Javascript e ovviamente le funzioni che specifiche per la creazione di animazioni (per esempio, proprietà come "canvas. GetContext", "fillStyle" oppure metodi come "createPattern", "createLinearGradient"). Qui, invece, trovate alcuni riferimenti che vi potranno servire per iniziare: http://www. W3schools. Com/tags/ref_canvas. Asp Se avete le conoscenze giuste, con un semplice ma organizzato editor di testo e il vostro browser preferito (consigliato Chrome, per motivi di compatibilità con l'HTML5), riuscirete ad ottenere la vostra animazione senza troppa fatica. Questo metodo naturalmente richiede molto più tempo rispetto agli altri in quanto dovremo creare noi quasi da zero il codice e soprattutto non è molto adatto a chi ha poche conoscenze di Javascript.

34

Se il Javascript non è il vostro forte e non riuscite proprio ad impararlo, oppure, se scrivere tramite codice un'animazione vi fa perdere molto tempo, non disperate: potete far affidamento su dei programmi che permettono di creare animazioni come se le steste disegnando. In particolare sono due i software utili per questo scopo: "Hype" ed "Adobe Edge Animate". Il primo, supporta a pieno l'HTML5 e vi consentirà, volendo, di creare anche il resto della struttura del sito web. Tramite semplici strumenti potrete creare figure di ogni tipo e colore, importare immagini, inserire testi, e impostare la direzione e velocità degli elementi, nonchè della scena animata. È disponibile sia su Mac che su Windows. La licenza è Trialware, quindi, avrete un tempo di prova gratuita, prima di scegliere se acquistarlo o meno. È scaricabile tramite il sito ufficiale: http://tumult. Com/hype/.

Continua la lettura
44

Anche "Adobe Edge Animate" è risulta essere ottimo. È possibile scaricarlo, per Windows o Mac, dal suo sito: http://html. Adobe. Com/edge/animate/ (con licenza Trialware). Ricordate sempre di consultare il Web: troverete moltissimi esempi e consigli, qualunque sia la strada che avete scelto per realizzare le vostre animazioni in HTML5. Spess sul web potrete trovare anche delle frazioni di codice da implementare a i vari programmi per la creazione di animazioni, questi serviranno soprattutto per rendere ancora più personalizzata l'animazione.  

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Guida: Programmare in HTML5

L'HTML5 è uno scripting-language usato esclusivamente per costruire pagine Internet. Universalmente diffuso e abbastanza semplice da imparare, consente di predisporre contenuti da esporre sul Web facilmente e dotati di caratteristiche anche sofisticate....
Programmazione

Come creare un sito web in HTML5

L’ HTML5 è un insieme di tecnologie volte allo sviluppo e alla creazione di web application e pagine web. Le novità introdotte sono molteplici, che tendono a semplificare la creazione di un sito, utilizzando markup e semantica più facile. Uno tra...
Programmazione

I migliori editor di videogame

Quanti di noi, amanti dei videogames, non hanno mai sognato di creare un videogioco? Molto spesso però ci frena il fatto che non abbiamo le conoscenze di programmazione che ci permetterebbero di poter sviluppare un videogame. Per cui, possiamo riporre...
Windows

Come creare online animazioni in 3D

Come creare velocemente una simpatica animazione con effetti 3D da una semplice figura, possiamo usare il servizio on-line. Potremo vedere subito il risultato del nostro breve lavoro. Bastano pochi clic per creare on-line divertenti animazioni 3D senza...
Windows

5 programmi per creare GIF animate

Quanti di voi si saranno certamente imbattuti in immagini movimentate che però non sono dei video, ma neanche semplici foto statiche, a volte persino dei disegni in movimento. Si tratta della cosiddetta "GIF animata", che è sì un'immagine, ma composta...
Internet

Come inserire immagini animate sul blog

Hai un blog e stai pensando da qualche tempo di personalizzarlo realizzando tu stesso delle immagini e delle animazioni da inserire nella pagina, ma non sai da che parte iniziare per raggiungere il tuo obiettivo? Oppure un amico ti ha chiesto di farlo...
Programmazione

HTML5: 10 cose da sapere

Chiunque di voi abbia mai avuto una minima esperienza del mondo informatico saprà senza alcun dubbio che esistono tantissimi linguaggi per programmare in questo ambito, ad esempio il C++, il CSS, il Pyton e l'HTML, ovviamente ognuno di questi offre vantaggi...
Windows

Imparare ad utilizzare Adobe Flash Professional

Adobe Flash è un programma utilizzato per la creazione di contenuti multimediali. Progettare animazioni e altri elementi all'interno di Flash può sembrare davvero complicato, soprattutto a causa del suo motore grafico che, per chi arriva da altri software...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.