Originariamente inviata da
KillerWorm
Concettualmente il procedimento può sembrare poco intuitivo ma il punto essenziale sta nel capire come funziona la proprietà delay.
In sintesi:
Il termine delay sta per "ritardo".
Il valore 0 (che è di default) sta ad indicare che non deve essere applicato alcun ritardo sull'inizio dell'animazione, per cui inizia all'istante.
Valori positivi, invece, stanno ad indicare che l'animazione deve iniziare con uno specifico ritardo.
Al contrario, valori negativi, implicano un anticipo sull'avvio dell'animazione, cioè l'avvio dell'animazione è spostato in avanti rispetto a quello che è il punto iniziale nella timeline (linea temporale) ipotetica dell'intera animazione.
Facendo un'analogia, è come se tre treni dovessero percorrere uno stesso tragitto la cui tabella di marcia è: partenza 10:00, arrivo 11:00
Il tempo che si impiega a percorrere il tragitto è quindi un'ora esatta. La timeline (linea temporale) sarà quindi fissata dall'ora X iniziale fino all'ora Y finale (che equivale all'ora X+1h).
Il treno A parte alle 10:00 (che è l'ora zero) per cui il delay è 0 e l'ora di arrivo sarà 11:00
Il treno B ha un ritardo di mezz'ora per cui il delay sarà 0.5h (mezz'ora). Il calcolo è presto fatto, arriverà a destinazione alle 11:30 (cioè l'ora di arrivo ipotetica della tabella di marcia più mezz'ora)
Il treno C, invece, gioca d'anticipo e parte mezz'ora prima, cioè il delay sarà -0.5h.
Questo cosa significa? Se prendiamo in esame la finestra temporale fissata dalla tabella di marcia (cioè la nostra timeline), nell'istante zero vedremmo che A sta esattamente al punto 0, B non è ancora apparso sulla scena (apparirà dopo mezz'ora), mentre C (che aveva giocato d'anticipo) lo vedremmo già posizionato a metà del percorso, cioè come se avesse già camminato per mezz'ora (anche se noi non lo abbiamo visto).
Ora torniamo al tuo caso. Sperando di averti chiarito il discorso del delay negativo (e di non averti confuso di più), probabilmente ti starai comunque chiedendo: "sì, ok per il valore negativo, ma perché -1.3 o 2.7 o gli altri valori che sembrano presi a caso?"
Qui dobbiamo fare un passo indietro. Il calcolo va effettuato tenendo conto della proporzione tra il tempo totale espresso in secondi e i valori percentuali specificati per i keyframes, nonché il numero di elementi in gioco.
Perché -1.3?
Tale valore identifica il punto (riferito alla timeline) in cui il valore di opacity è già uguale a 1, cioè il punto appena dopo la prima transizione da 0 a 1 che dura l'8% dell'intera animazione
In altre parole, data la durata totale di 16s ne ho ricavato l'8%.
Matematicamente: 16/100*8 = 1.28 (approssimato a 1.3)
Ho quindi considerato questo valore come punto di avvio dell'animazione sulla prima immagine.
Le altre 3 immagini saranno chiaramente distanziate l'una dall'altra da un intervallo di 4 secondi, cioè il tempo totale (16s) diviso il numero di immagini (4).
Da questo ne ho semplicemente dedotto che la seconda immagine dovesse partire con un ritardo di -1.3+4 secondi, cioè 2.7.
Cosi per la terza immagine, 2.7+4 = 6.7 e analogamente per l'ultima immagine.
Sembra complicato ma è più facile a farsi che a dirsi.
Rispondi quotando
