HTML5 Mobile app: transizioni ed animazioni CSS3: parte1
Sicuramente avrai già sentito parlare di applicazioni mobile create completamente in HTML5, CSS3 e Javascript, o magari abbinando questi tipi di linguaggi con quelli nativi, come nelle applicazioni “ibride”.
Forse potrebbe interessarti l’ottimo post di Smashing Magazine sulle applicazioni ibride: Best Of Both Worlds: Mixing HTML5 And Native Code.
In questo articolo vorrei riflettere su quali strade poter percorrere per creare effetti accattivanti e controllare le animazioni in ambito mobile.
Sviluppare HTML5 mobile app con CSS3 e Javascript
Per facilitare lo sviluppo di applicazioni web sono nate numerose librerie e framework che consentono di ricreare, tramite HTML, interfacce pressoché identiche (o comunque molto simili) a quelle realizzate in maniera nativa. Tanto per citarne alcune, ecco una breve lista di mobile frameworks:
Una soluzione alternativa è quella di scrivere manualmente il codice CSS e Javascript.
Entrambe le metodologie hanno i loro pro e contro: se da una parte l’impiego dei vari framework rende più facile gestire problemi comuni e utilizzare animazioni standard o funzionalità javascript, dall’altra scrivere personalmente il codice offre molta più libertà di personalizzazione.
Durante le mie esperienze lavorative ho avuto la possibilità di realizzare diverse mobile app, tutte in HTML5, Javascript e CSS, alcune delle quali pubblicate nei vari market stores e altre usate come versione mobile di siti web (tra queste anche due progetti personali: Tint Weather App e Dieta SI o NO?).
Ognuno di quei progetti mi è servito a prendere una netta decisone: scrivere le mie applicazioni da zero.
Il motivo? Performance e fluidità.
E’ vero che i vari framework mettono a disposizione strumenti già pronti come liste, sliders, menu ecc., ma è anche vero che applicazioni create con tali librerie risultano il più delle volte pesanti, scattose e poco reattive.
Ma torniamo al punto.
Sia che si decida di optare per la scrittura manuale del codice che per l’utilizzo di framework appositi, la presenza di animazioni come slide-left, slide-right, pop o flip è essenziale per ricreare un’esperienza che sia conforme a quella di applicazioni native.
La metodologia con cui vengono realizzate incide notevolmente sulle prestazioni, soprattutto nel caso di dispositivi mobile, che per caratteristiche hardware sono meno potenti di quelli desktop.
Animazioni imperative ed animazioni dichiarative
Gli sviluppatori possono decidere di animare gli oggetti DOM tramite Javascript (animazioni imperative) e tramite CSS (animazioni dichiarative).
Animare usando Javascript permette un controllo maggiore, in quanto avviare, mettere in pausa, interrompere o cancellare un effetto risulta molto semplice.
Tuttavia questo tipo di approccio presenta un difetto che non è possibile ignorare: le animazioni vengono eseguite nel main thread del browser, che è già occupato da altri javascript o dai processi di rendering degli elementi.
Per cui capita spesso che lo spazio disponibile nel thread venga conteso, aumentando di conseguenza la possibilità che alcuni frame che compongono l’animazione siano completamente ignorati (producendo fastidiosi sfarfallii o movimenti scattosi).
Animando tramite CSS3 abbiamo invece il vantaggio di lasciare al browser l’ottimizzazione delle prestazioni; esso infatti organizzerà da solo l’esecuzione dei frames, svolgendo inoltre parte delle operazioni all’infuori del main thread.
Contrariamente alle animazioni imperative, per quelle dichiarative il controllo risulta molto difficoltoso. Per cui diventa più difficile sincronizzare tra loro più animazioni, ed è quindi più facile commettere errori.
Sempre tenendo in considerazione il loro impiego in ambito mobile, decidiamo di puntare sulle performance, per cui la scelta ricade sulle animazioni dichiarative.
Alcuni esempi di animazioni facilmente riproducibili con i CSS3
Forse può interessarti questo post su come ottimizzare animazioni CSS3 per le performance.
Come controllare le animazioni CSS3
Agendo da CSS abbiamo a disposizione due tipi di proprietà: la transition e l’animation. La prima permette di applicare un effetto graduale su di un elemento DOM nel momento in cui viene modificata una proprietà.
La seconda invece agisce in modo diverso: il suo compito è quello di applicare all’elemento interessato un’animazione precedentemente dichiarata e formata anche da più di due stati. La proprietà animation offre un controllo più dinamico, in quanto è possibile controllarne i vari step.
In questa prima parte ci limiteremo a vedere le possibili strade per controllare effetti creati con la proprietà transition, mentre nella seconda parte vedremo come controllare la proprietà animation.
Avviare e mettere in pausa un effetto transition
Per dare inizio ad una transizione basterà modificare l’attributo CSS “scatenante”. Prendiamo in considerazione un’ipotetica animazione che mostra in dissolvenza la div “#mydiv”:
#mydiv{ margin:0 auto; width:100px; height:100px; background: blue; opacity: 0; -webkit-transition: opacity 5s; -moz-transition: opacity 5s; -ms-transition: opacity 5s; -o-transition: opacity 5s; transition: opacity 5s; } #mydiv.show{ opacity: 1; }
La proprietà scatenante in questo caso è l’opacity, e quando sarà modificata, l’effetto avrà inizio e durerà 5 secondi. Per poter avviare l’animazione basterà semplicemente aggiungere la classe “show” alla nostra div:
//javascript classico var div = document.getElementById("mydiv"); div.className = div.className + " show"; //jquery $("#mydiv").addClass("show");
Ecco il risultato: demo
Se vogliamo invece mettere in pausa un effetto transition per poi riavviarlo in un secondo momento, dovremo usare il metodo getComputedStyle nel caso di javascript classico, o il metodo .css nel caso di jQuery:
//javascript classico var div = document.getElementById("mydiv"); //start div.classList.add('show'); //pause var computedStyle = window.getComputedStyle(div), opacity = computedStyle.getPropertyValue('opacity'); div.style.opacity = opacity; div.classList.remove('show'); //jquery //start $("#mydiv").addClass('show'); //pause var opacity = $("#mydiv").css("opacity"); $("#mydiv").removeClass("show"); $("#mydiv").css("opacity", opacity);
In poche parole per l’avvio o la ripresa dell’effetto aggiungiamo la classe “show”, mentre per metterlo in pausa riprendiamo il valore della proprietà “scatenante” nel momento in cui vogliamo fermare l’animazione; poi rimuoviamo la classe “show” ed aggiorniamo quella proprietà con il dato appena acquisito.
Risultato: Demo
Conclusioni
Controllare la proprietà transition e animation rappresenta un vantaggio molto grande se si vuole rendere più piacevole l’esperienza utente dei nostri prodotti, soprattutto se il nostro intento è quello di realizzare una mobile app in HTML5, CSS3 e Javascript.
Utilizzando questa tecnica unita a molte altre ho creato per i miei clienti oltre 10 applicazioni mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?.
Se anche tu sei un web designer e vuoi realizzare la tua applicazione mobile da distribuire nei vari stores, continua a seguirci!
Arriveranno presto nuovi articoli di approfondimento sull’argomento, per rendere la tua mobile app fluida e reattiva come quelle native.
14 commenti
Trackback e pingback
-
HTML5 Mobile app: transizioni ed animazioni CSS...
[…] Sicuramente avrai già sentito parlare di applicazioni mobile create completamente in HTML5, CSS3 e Javascript, o magari abbinando questi… -
HTML5 Mobile app: transizioni e animazioni CSS3 (parte 2) | Your Inspiration Web
[…] prima parte di questa mini guida abbiamo parlato dei concetti di animazioni imperative/animazioni dichiarative, […] -
Le 6 migliori tecniche per aumentare le performance di una HTML5 Mobile App | upCreative
[…] HTML5 Mobile app: transizioni e animazioni CSS3 – parte 1 […] -
HTML Mobile App: 5 Consigli per aumentare le performance | Your Inspiration Web
[…] articoli precedenti (HTML5 Mobile App: transizioni ed animazioni CSS3 parte 1 e parte 2) abbiamo visto come poter realizzare… -
Come realizzare la view di una HTML Mobile App con tab-bar animata | Your Inspiration Web
[…] HTML5 Mobile app: transizioni ed animazioni CSS3: parte 1 […]
Ciao bellissimo articolo, sempre utile e preciso, grazie mille!
Grazie! :)
Come sempre ottimo ed interessante articolo, solo una domanda se posso, sviluppando una webapp in html5 per poi poterla pubblicare nei vari store, é necessario convertirla in nativa. Che programmi hai usato?
, io ho avuto qualche esperienza con phonegap, ma importando il progetto e non creandolo direttamente in codice, non riesco a fare interaggire l’app con l’hardware del dispositivo.
Hai integrato le notifiche nelle tue webapp? Cosa hai usato?
Grazie
Ottimi articoli sempre…
Saluti
Andrea
Ciao Andrea,
si con Phonegap puoi compilarla tranquillamente e distribuirla in diverse piattaforme, ed è proprio il tool che utilizzo solitamente per svolgere questa operazione.
Phonegap è molto comodo proprio perché offre una serie di plugin appositi per interagire con le funzionalità hardware del dispositivo come per es. la bussola o la fotocamera; a volte, per implementare features meno comuni, mi è capitato di scrivere dei plugin personalmente, visto che non erano presenti nella lista della documentazione, ma generalmente quelli di default possono bastare.
Anche per quanto riguarda le notifiche push ci sono diversi plugin esterni alla documentazione e tutorial che aiutano ad implementare questa funzionalità nel proprio progetto Phonegap.
In pratica hai a disposizione tutti gli strumenti! ;)
Ancora grazie, farai un articolo dedicato all’uso di phonegap con html5?
Continuate così, finalmente articolo freschi e interessanti.
Forse più avanti lo metterò in programma, anche se la documentazione non è molto difficile.. Grazie!! :)
Ormai per questo argomento sei diventato il mio unico punto di riferimento :D
Ciao Francesco! E’ un piacere per me essere utile! ;)
Ciao, anche sto cercando di sviluppare qualche app mobile tramite html etc…Ho da farti qualche domanda, spero che mi darai qualche suggerimento da dove per partire. Ho visto la tua app dieta si o no? volevo chiederti se l’hai sviluppata tutta in html5 perche a vederla sembra nativa ios. Inoltre per salvare i dati utilizzi qualche la memoria del dispositivo o mandi tutto su un server? da poco mi sono avvicinato al mondo delle app mobile, ho letto sia di Phonegap che di Apache Cordova, volevo sapere se puoi dirmi la differenza e qualche conviene utilizzare…Sopratutto qualche guida/tutorial sul come utilizzarli? Grazie.
PS. attendo con ansia il tuo ebook ;)