Animazione in HTML

Sezione inerente a tutte le discussioni o tutte le problematiche non trattate nelle altre sezioni di questa categoria.

Moderatori: Kagemitsu, maurizio

Regole del forum
Per scrivere del codice all'interno di ogni post, utilizzare il tag: [syntax=il_linguaggio]codice[/syntax] sostituendo "il_linguaggio" con il linguaggio del codice che dovete inserire, ad esempio: html, css, javascript, php, asp, ecc...

Animazione in HTML

Messaggioda 3do » giovedì 17 febbraio 2011, 0:18

Premetto che non ho mai programmato in HTML quindi vi prego di essere clementi se non capisco e spero che qualcuno mi possa aiutare!

Vi spiego la situazione:
Ho trovato per iPhone un'applicazione su cydia che si chiama PerPageHTML, che permette di creare widgets su oni pagina.
Ho scaricato un widget che mi piace ma vorrei aggiungerci un'animazione! Ho preparato un set di 12 immagini che però adesso non riesco ad applicare al widget.. ho visto un po' il codice e, di solito, quando carica qualcosa usa il comando "document.ElementById("xxx").src="xxx" ... quindi potreste spiegarmi se questo è il metodo giusto per creare un'animazione e cosa bisogna mettere detro i due spazi dentro le virgolette??

Grazie per la vostra attenzione, spero di essermi spiegato bene, se no chiedete pure!!
3do

Avatar utente
 
Messaggi: 3
Iscritto il: mercoledì 16 febbraio 2011, 23:55

Re: Animazione in HTML

Messaggioda Paper-bat » venerdì 18 febbraio 2011, 18:22

allora..
prendiamo le cose con ordine..

In programmazione è un po' come cucinare.. devi avere gli ingredienti.. e gli strumenti.. o almeno un po' di uno e dell'altro :)
da quella piccola riga di codice che hai postato sembra che tu usi javascript per fare le animazioni. Vediamo come fare un animazione:

per animare un elemento devi conoscere un poco di cinematica.. accelerazione decelerazione, framing (per vedere quanti frame al secondo fare).. e un sacco di altra roba.. ma siccome non abbiamo tutto questo tempo.. e tutti questi strumenti.. andiamo a prendere il mixer.. :P
in questo caso ci facciamo aiutare da jquery.. ci sono anche altre librerie ma jquery in questo caso ci aiuta di molto :)

mettiamo conto di avere il nostro codice html
Sintassi: html [ Scarica ] [ Nascondi ]
  1. <style>
  2. #boxMobile { width:50px; height:50px; background:green; }
  3. </style>
  4. <div id="boxMobile">Io sono il box mobile..</div>
  5.  


e vediamo di dargli una mossa con jquery

Sintassi: javascript [ Scarica ] [ Nascondi ]
  1. $(document).ready(function() {
  2.   $('#boxMobile').animate({marginLeft: '50'});
  3. });
  4.  

qui sopra ho usato la dicitura camelCase (che ci permette di scrivere le proprietà da modificare senza le virgolette), in sostanza ci sposta il nostro div#boxMobile di 50px verso destra, possiamo applicargli diverse stili, cambiargli dimensioni, concatenare animazioni (basta che metti .animate() uno dietro l'altro .animate().animate().animate())

Spero di essere stato chiaro, nel caso vuoi approfondire ti lascio il link alla funzione
http://api.jquery.com/animate/

qui invece ti lascio il link a tutti gli effetti che puoi utilizzare con jquery
http://api.jquery.com/category/effects/

Spero di essere stato chiaro.. nel caso dimmi pure, che delucido.. :)
Code is Poetry | Ruby! A programmer's best friend..
Paper-bat

Moderatore

Avatar utente
 
Messaggi: 44
Iscritto il: giovedì 30 dicembre 2010, 19:03
Località: Cattolica (RN)

Re: Animazione in HTML

Messaggioda 3do » venerdì 18 febbraio 2011, 21:25

Grazie del tuo aiuto Paper-bat...
l'unico problema è che non devo fare muovere una immagine ma solamente mandare in sequenza 12 immagini in modo da formare un'animazione.

Comunque adesso ti spiego come è strutturato questo programma (o almeno cosa ho capito): é un widget di un orologio con il meteo, le cui animazioni, ognuna in una cartella, hanno:
le loro immagini;
un file .css (che da quello che ho capito è il file che dice la posizione dell'immagine e contiene anche delle keyframes dell'animazione);
poi un file .js che contiene le funzioni che richiamano le immagini.

Poi c'è un unico file .html che penso coordini tutte le animazioni,non so se questa è una struttura diffusa.
L'unico problema è che tutte le animazioni in questo widget sono composte da una sola immagine che si muove, io invece dovrei creare un' animazione composta da più immagini che fungono da frames!


Ora, non conoscendo il linguaggio, mi potresti dire qual è la funzione che diciamo carica le immagini in un determinato tempo e anche come dirgli quand'è il tempo giusto? ho visto che assegna a delle variabili il valore delle ore, dei minuti e dei secondi utilizzando il comando "var s = now.getSeconds()"; poichè a me servirebbe far partire l'animazione alla fine di ogni minuto, è possibile anche registrare i centesimi di secondo??

Spero di aver detto tutti gli elementi utili per far capire il funzionamento questo widget!
3do

Avatar utente
 
Messaggi: 3
Iscritto il: mercoledì 16 febbraio 2011, 23:55

Re: Animazione in HTML

Messaggioda Paper-bat » venerdì 18 febbraio 2011, 22:27

direi che se vuoi un countdown o roba simile prova con:

setTimeout esegue la funzione dopo il tempo
setInterval esegue la funzione ogni tot tempo
Code is Poetry | Ruby! A programmer's best friend..
Paper-bat

Moderatore

Avatar utente
 
Messaggi: 44
Iscritto il: giovedì 30 dicembre 2010, 19:03
Località: Cattolica (RN)


Torna a Problematiche e discussioni varie