Zero Block: Animazione passo dopo passo

In Zero Block esistono due modalità di animazione:

1) L'animazione di base è un'animazione semplice. Si tratta di effetti già pronti e più comunemente utilizzati, come l'effetto di apparizione (attraverso l'opacità, dal basso verso l'alto, da destra a sinistra, ecc.), il parallasse e il fissaggio. Sono sufficienti nel 90% dei casi.

Guida all'animazione di base →

2) L'animazione passo-passo consente di trasformare in realtà idee brillanti e creative, nel modo desiderato.

Scoprite diversi esempi di ciò che potete ottenere utilizzando l'animazione passo-passo.

Lo strumento di animazione passo-passo è disponibile in Zero Block, un editor web rivolto ai designer professionisti. Aggiungete un Zero Block alla pagina selezionandolo nella Libreria dei blocchi (appena sotto la categoria "Altro"), oppure fate clic su Zero Block in fondo alla pagina.

Cliccate su Modifica blocco nell'angolo in alto a sinistra di Zero Block per personalizzarlo.

Aggiungete un nuovo elemento, selezionatelo, aprite il pannello Impostazioni, scorrete fino alla sezione "Animazione passo dopo passo" e cliccate su Aggiungi.

La creazione di un'animazione passo-passo per un elemento annullerà tutte le impostazioni dell'Animazione di base per questo elemento.

Per iniziare a creare un'animazione passo dopo passo, è sufficiente selezionare un Evento, cioè una condizione che fa iniziare la riproduzione dell'animazione. È possibile scegliere tra cinque condizioni:

• Elemento sullo schermo: un'animazione viene riprodotta non appena un determinato elemento appare sullo schermo;
• Blocco sullo schermo: un'animazione viene riprodotta quando un intero blocco appare sullo schermo;
• Durante lo scorrimento, viene avviata un'animazione che continua a essere riprodotta durante lo scorrimento;
• Al passaggio del mouse: un'animazione viene riprodotta al passaggio del mouse;
• Al clic: un'animazione viene riprodotta al clic.

Il punto di inizio dell'animazione ha tre opzioni aggiuntive: Innesco iniziale, Loop e Offset dell'innesco.

• Il trigger di avvio è un'area o un elemento che avvierà l'animazione. È possibile scegliere tra tre aree: in alto, al centro o in basso della finestra;
• L'offset dell'attivazione è l'offset del punto di inizio dell'animazione rispetto alla parte superiore, centrale o inferiore della finestra selezionata;
• Loop si usa per impostare un'animazione da riprodurre in loop.

È possibile testare un'animazione, un elemento selezionato o tutti gli elementi del blocco facendo clic su Riproduci elemento o Riproduci tutto.

Il primo passo è stato impostato in modo predefinito. Si chiama Inizio. Aggiungere passi e modificare le proprietà dell'elemento a ogni passo. In questo modo l'elemento cambierà.

Per aggiungere un passo, fare clic su Aggiungi passo.

È possibile passare da un passo all'altro. Il bordo di un elemento che diventa blu significa che l'elemento è nella sua posizione originale, mentre il bordo dell'elemento che diventa verde significa che il passo è in fase di modifica.

Ogni fase ha una serie di proprietà, come Durata, Sposta, Scala, Opacità, Rotazione, Attenuazione e Ritardo.

Durata è la durata di un'animazione in secondi.
Sposta sono le coordinate in cui l'elemento viene spostato rispetto alla sua posizione originale. Per impostarle, si possono assegnare valori o spostare l'elemento.
Scala è il grado di aumento o diminuzione dell'elemento entro la fine del passo.
Opacità è il valore della trasparenza dell'elemento entro la fine del passo.
Ruota è la rotazione di un elemento in gradi verso la fine del passo.
Facilità è l'opzione per scegliere un effetto di animazione: Linear (esecuzione lineare dell'animazione); easeIn, easeOut, easeInOut (rallentamento all'inizio, alla fine o sia all'inizio che alla fine dell'animazione); bounceFin (un piccolo rimbalzo di un elemento alla fine dell'animazione).
Delay è la durata di una pausa prima che inizi la riproduzione di un'animazione.

Vediamo come spostare questo quadrato giallo di 550px a destra, ridimensionarlo durante il movimento e tornare alla posizione originale.

Ecco una guida passo passo con i nostri commenti qui sotto:

Oltre ai pulsanti "Riproduci elemento" e "Riproduci tutto", è possibile visualizzare l'anteprima dell'animazione.

Aprire due schede nel browser: Zero Block e la stessa pagina in modalità anteprima.

In questo modo, quando si fa clic su Salva in Zero Block, si vedranno le modifiche nella pagina di anteprima dopo averla aggiornata.