Zero Block: animazione passo-passo

Ci sono due modalità di animazione in Zero Block:

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

Guida all'animazione di base →

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

Dai un'occhiata a diversi esempi di ciò che puoi ottenere utilizzando l'animazione passo-passo.

Lo strumento di animazione passo-passo è disponibile in Zero Block, un editor web rivolto ai designer professionisti. Aggiungi un Zero Block alla pagina selezionandolo nella Libreria Blocchi (appena sotto la categoria "Altro"), oppure fai clic su Zero Block nella parte inferiore della pagina.

Fai clic su Modifica blocco nell'angolo in alto a sinistra dello Zero Block per personalizzarlo.

Aggiungi un nuovo elemento, selezionalo, apri il pannello Impostazioni, scorri verso il basso fino alla sezione "Animazione passo passo" e fai clic su Aggiungi.

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

Iniziare a creare un'animazione dettagliata selezionando un evento, una condizione per l'avvio della riproduzione dell'animazione. Ci sono cinque condizioni tra cui scegliere:

• Elemento sullo schermo: la riproduzione di un'animazione viene avviata non appena un particolare elemento appare sullo schermo;
• Blocca sullo schermo: viene avviata la riproduzione di un'animazione quando sullo schermo viene visualizzato un intero blocco;
• Su scorrimento: viene avviata la riproduzione di un'animazione e continua a essere riprodotta durante lo scorrimento;
• Al passaggio del mouse: viene avviata la riproduzione di un'animazione al passaggio del mouse;
• Al clic: viene avviata la riproduzione di un'animazione con un clic.

Il punto iniziale dell'animazione ha tre opzioni aggiuntive: Trigger iniziale, Loop e Offset trigger.

• Start Trigger è un'area o una cosa che avvierà la tua animazione. Scegli tra tre aree: in cima alla finestra, al centro della finestra o in basso alla finestra;
• L'offset del trigger è l'offset del punto iniziale dell'animazione rispetto alla parte superiore della finestra, al centro della finestra o alla parte inferiore della finestra selezionata;
• Loop viene utilizzato per impostare un'animazione da riprodurre in loop.

Puoi testare un'animazione o un elemento selezionato o tutti gli elementi nel blocco facendo clic su Riproduci elemento o Riproduci tutto.

Il primo passo è stato impostato per impostazione predefinita. Si chiama Inizio. Aggiungi passaggi e modifica le proprietà degli elementi ad ogni passaggio. Questo farà cambiare l'elemento.

Per aggiungere un passaggio, fare clic su Aggiungi passaggio.

Puoi passare da un passaggio 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 passaggio è in fase di modifica.

Ogni passaggio ha un set di proprietà quali Durata, Sposta, Scala, Opacità, Rotazione, Attenuazione e Ritardo.

La durata è la durata di un'animazione in secondi.
Sposta è la coordinata in cui l'elemento viene spostato rispetto alla sua posizione originale. Per configurarli, è possibile assegnare valori o spostare l'elemento.
La scala è il grado di aumento o diminuzione dell'elemento entro la fine del passaggio.
L'opacità è il valore della trasparenza degli elementi alla fine del passaggio.
Ruota è la rotazione di un elemento in gradi verso la fine del passo.
L'interpolazione è l'opzione per scegliere un effetto di animazione: Lineare (esecuzione di animazione lineare); 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).
Il ritardo è la durata di una pausa prima dell'inizio della riproduzione di un'animazione.

Diamo un'occhiata a come spostare questo quadrato giallo di 550 px a destra, ridimensionarlo mentre è in movimento e tornare alla sua posizione originale.

Ecco una guida passo-passo con i nostri commenti di seguito:

Oltre ai pulsanti "Play Element" e "Play All", puoi anche visualizzare in anteprima l'animazione.

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

Quindi, quando fai clic su Salva in Zero Block, vedrai le modifiche nella pagina di anteprima dopo averla aggiornata.