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

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 ...
Programmazione

Come usare il metodo animate di jQuery

JQuery è una libreria di funzioni scritta in Javascript, che può essere utilizzata su diversi browser e permette di aggiungere delle funzionalità alle pagine HTML ...
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 ...
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 ...
Programmazione

Errori da non commettere nell'uso di Javascript

Javascript è un linguaggio informatico utilizzato nella programmazione web lato client, per la creazione di siti e applicazioni con effetti dinamici e interattivi, tramite funzioni ...
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 ...
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 ...
Programmazione

Creare una tabella dinamica parametrizzata in Jquery

Spesso capita di dover inserire una tabella nelle pagine web. In alcuni casi questo è un problema perché richiede un lungo procedimento. La soluzione è ...
Internet

Come effettuare un redirect in HTML

Esistono diversi modi per effettuare il redirect, ovvero per reindirizzare l'utente verso un'altra pagina web. Di seguito verrà spiegato il redirect tramite l ...
Windows

Come installare e configurare Adobe Premiere Pro

Adobe Premiere Pro è un programma per montare dei video. Si utilizza per la creazione o la modifica di un filmato, soprattutto a livello altamente ...
Software

Come costruire un menu con immagini animate in jQuery

Stai realizzando un sito web? Oltre ad aver curato in tutti gli aspetti l'architettura dei suoi contenuti, avrai subito notato che bisogna prestare particolare ...
Programmazione

Come iniziare a programmare ed usare Javascript

"Javascript" rappresenta il linguaggio di scripting client-side maggiormente impiegato a livello mondiale. Inizialmente venne sviluppato dalla "Sun Microsystems ...
Software

Guida ad Adobe After Effects CS6

All'interno della guida che seguirà proveremo a offrirvi delle informazioni relative a un software. Infatti, come avrete compreso facilmente leggendovi il titolo della guida ...
Programmazione

Come creare un semplice script con JavaScript

Prima di sapere come creare un semplice script con JavaScript, mi sembra logico risponderti ad una domanda ovvia, cosa è JavaScript? Detto in poche parole ...
Programmazione

Bootstrap: come animare i pulsanti con Javascript

La tecnica di creazione di interfacce web tramite Bootstrap è la più utilizzata ad oggi. Le possibilità di personalizzazione di questa piattaforma sono enormi, potendo ...
Internet

Come creare un pannello con i colori con jQuery

Gli indirizzi internet devono rispettare delle norme di estetica inequivocabili e che debbano essere sensibili ad un giudizio positivo dei lettori. Per crearli si devono ...
Linux

Le alternative a Dreamviewer per Linux

Chi è appassionato di tecnologia e di computer avrà sicuramente già sentito parlare di Adobe Dremviewer. Si tratta di un software che permette di realizzare ...
Windows

Come Creare Gif animate sul PC

Con l'avanzare della tecnologia le forme di intrattenimento multimediale sono aumentate e con esse anche la presenza di nuovi medium, una di questi sono ...
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 ...
Mac

Come usare Dreamweaver CS6

Adobe Dreamweaver CS6 è uno strumento di sviluppo web realizzato da Adobe Systems, è disponibile per OSX e per Windows. Le versioni più recenti hanno ...
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»”.