Il componente Galleria con transizione

Questo componente non è supportato per gli annunci HTML AMP, gli annunci video o gli annunci illustrati.

Il componente Galleria con transizione ti consente di visualizzare le immagini in successione, animando la transizione tra loro.

Scegliere la galleria più adatta

Google Web Designer ha quattro diversi componenti Galleria:

• La Galleria a 360° mostra immagini dell'oggetto da diverse angolazioni, permettendoti di scorrere avanti e indietro per ruotare l'oggetto. La Galleria a 360° non mostra elementi di navigazione o gruppi.
• La Galleria a scorrimento offre una visione semplice e piatta e consente di scorrere le immagini o i gruppi in senso verticale od orizzontale.
• La Galleria con vista a sequenza è simile alla Galleria a scorrimento, ma dona alle immagini precedenti e successive un aspetto tridimensionale, come se fossero su un display che ruota.
• La Galleria con transizione offre una serie di effetti di animazione passando da un'immagine all'altra.

Per utilizzare il componente Galleria con transizione:

1. Apri il riquadro Componenti, quindi la cartella Gallerie.

2. Fai doppio clic sul componente Galleria con transizione o trascinalo sullo stage.

3. Fai doppio clic sul componente o fai clic sul pulsante Impostazioni… nel riquadro Proprietà. Viene visualizzata la finestra di dialogo Galleria con transizione.

4. Il riquadro Raccolta a sinistra mostra le immagini che è possibile includere nella galleria. Per aggiungere immagini, fai clic sul pulsante Importa asset nella parte inferiore del riquadro oppure trascina le immagini da un'altra finestra.

5. Trascina le immagini desiderate nella galleria nel riquadro Frame nella parte inferiore della finestra di dialogo o sullo stage. Per aggiungere più immagini dalla Raccolta, puoi anche selezionarle tutte, quindi fare clic con il tasto destro del mouse sulla selezione e scegliere Aggiungi.

6. Seleziona il tipo di transizione nel riquadro Transizione.

7. Personalizza durata della transizione, easing e altre proprietà (descritte di seguito).

Per riordinare le immagini della galleria:

1. Apri la finestra di dialogo Galleria con transizione facendo doppio clic sul componente sullo stage o facendo clic su Impostazioni… nel riquadro Proprietà.
2. Nel riquadro Frame in basso, trascina un'immagine nella sua nuova posizione.

Per rimuovere un'immagine della galleria:

1. Apri la finestra di dialogo Galleria con transizione facendo doppio clic sul componente sullo stage o facendo clic su Impostazioni… nel riquadro Proprietà.
2. Seleziona l'immagine o le immagini che vuoi rimuovere nel riquadro Frame in basso.
3. Premi il tasto Canc o fai clic con il pulsante destro del mouse sulla selezione e scegli Elimina dal menu popup.

Per scambiare un'immagine della galleria:

1. Apri la finestra di dialogo Galleria con transizione facendo doppio clic sul componente sullo stage o facendo clic su Impostazioni… nel riquadro Proprietà.
2. Fai clic con il pulsante destro del mouse sull'immagine nel riquadro Frame e seleziona Scambia immagine dal menu popup.

Proprietà

Puoi accedere alle proprietà di questo componente nella finestra di dialogo Galleria con transizione. Per aprire la finestra di dialogo, fai doppio clic sul componente Galleria con transizione sullo stage oppure fai clic su Impostazioni… nel riquadro Proprietà.

Tipi di transizione

È disponibile un diverso insieme di proprietà a seconda del tipo di transizione.

Nessuna

Non vi è alcun effetto di transizione visiva tra i frame.

Dissolvenza

La vecchia immagine sfuma progressivamente rivelando la nuova immagine.

Proprietà	Descrizione
Durata	La durata di un'animazione da un frame all'altro, in secondi. Il valore predefinito è 1.
Easing	L'easing dell'animazione di transizione. Linear (impostazione predefinita) Ease-in Ease-out Ease-in-out

Spinta

La nuova immagine viene visualizzata mentre la vecchia immagine viene spinta fuori.

Proprietà	Descrizione
Stile	Normale	Dividi
Durata	La durata di un'animazione da un frame all'altro, in secondi. Il valore predefinito è 1.
Easing	L'easing dell'animazione di transizione. Linear (impostazione predefinita) Ease-in Ease-out Ease-in-out
Direzione Disponibile se lo Stile è Normale	La direzione dell'effetto. Da sinistra a destra (impostazione predefinita) Da destra a sinistra Dall'alto verso il basso Dal basso verso l'alto
Orientamento Disponibile se lo Stile è Dividi	L'orientamento dell'animazione. Orizzontale Verticale (impostazione predefinita)

 

A comparsa

La nuova immagine sostituisce gradualmente la vecchia immagine lungo una o più linee in movimento.

Proprietà	Descrizione
Stile	Normale	Porta	Diaframma
	Radiale	Strisce
Durata	La durata di un'animazione da un frame all'altro, in secondi. Il valore predefinito è 1.
Easing	L'easing dell'animazione di transizione. Linear (impostazione predefinita) Ease-in Ease-out Ease-in-out
Direzione Disponibile se lo Stile è Normale, Strisce, Porta o Radiale	La direzione dell'effetto. Le opzioni disponibili dipendono dallo stile: Normale o Strisce: Da sinistra a destra (impostazione predefinita) Da destra a sinistra Dall'alto verso il basso Dal basso verso l'alto Porta: Apertura (impostazione predefinita) Chiusura Radiale: Senso orario (impostazione predefinita) Senso antiorario
Angolo Disponibile se lo Stile è Normale	L'angolo della linea di cancellazione in gradi, da -89 a 89.
Orientamento Disponibile se lo Stile è Porta	L'orientamento dell'animazione. Orizzontale Verticale (impostazione predefinita)
Origine Disponibile se lo Stile è Diaframma o Radiale	L'origine X e Y del diaframma o del raggio, in percentuale del frame della galleria.
Strisce Disponibile se lo Stile è Strisce	Il numero di strisce di ciascun colore, da 1 a 10. Il valore predefinito è 2.
Colore Disponibile se lo Stile è Strisce	Il colore di ogni striscia.

 

Sezione

La nuova immagine viene rivelata in sezioni o barre che scorrono una dopo l'altra.

Proprietà	Descrizione
Durata	La durata di un'animazione da un frame all'altro, in secondi. Il valore predefinito è 1.
Easing	L'easing dell'animazione di transizione. Linear (impostazione predefinita) Ease-in Ease-out Ease-in-out
Direzione	La direzione dell'effetto. Da sinistra a destra (impostazione predefinita) Da destra a sinistra Dall'alto verso il basso Dal basso verso l'alto
Sezioni	Il numero di sezioni, da 1 a 20. Il valore predefinito è 5.
Mostra sfondo trasparente	Seleziona questa casella per mostrare uno sfondo trasparente prima di passare alla nuova immagine, anziché sovrapporre la vecchia immagine.

Veneziane

La nuova immagine viene rivelata come da dietro delle veneziane.

Proprietà	Descrizione
Stile	Normale	Veneziane
Durata	La durata di un'animazione da un frame all'altro, in secondi. Il valore predefinito è 1.
Easing	L'easing dell'animazione di transizione. Linear (impostazione predefinita) Ease-in Ease-out Ease-in-out
Direzione Disponibile se lo Stile è Normale	La direzione dell'effetto. Da sinistra a destra (impostazione predefinita) Da destra a sinistra Dall'alto verso il basso Dal basso verso l'alto
Orientamento Disponibile se lo Stile è Veneziane	L'orientamento dell'animazione. Orizzontale Verticale (impostazione predefinita)
Veneziane	Il numero di veneziane, da 1 a 20. Il valore predefinito è 5.
Mostra sfondo trasparente Disponibile se lo Stile è Normale	Seleziona questa casella per mostrare uno sfondo trasparente prima di passare alla nuova immagine, anziché sovrapporre la vecchia immagine.
Sfalsato Disponibile se lo Stile è Veneziane	Seleziona questa casella se le veneziane devono passare uno dopo l'altra, anziché contemporaneamente.

Ruota

La vecchia immagine inizia a ruotare mentre lo zoom aumenta, quindi lo zoom diminuisce sulla nuova immagine mentre si completa la rotazione.

Proprietà	Descrizione
Durata	La durata di un'animazione da un frame all'altro, in secondi. Il valore predefinito è 1.
Easing	L'easing dell'animazione di transizione. Linear (impostazione predefinita) Ease-in Ease-out Ease-in-out
Direzione	La direzione dell'effetto. Senso orario (impostazione predefinita) Senso antiorario

Zigzag

La nuova immagine viene gradualmente rivelata in uno schema a griglia serpeggiante.

Proprietà	Descrizione
Durata	La durata di un'animazione da un frame all'altro, in secondi. Il valore predefinito è 1.
Easing	L'easing dell'animazione di transizione. Linear (impostazione predefinita) Ease-in Ease-out Ease-in-out
Orientamento	L'orientamento dell'animazione. Orizzontale (impostazione predefinita) Verticale
Righe	Il numero di righe, da 1 a 20. Il valore predefinito è 5.
Colonne	Il numero di colonne, da 1 a 20. Il valore predefinito è 5.

Proprietà della Galleria con transizione

Proprietà	Descrizione
Nome	Il nome del componente Galleria con transizione.
Immagini	Le immagini visualizzate nella galleria. Apporta le modifiche nel riquadro Frame della finestra di dialogo Galleria con transizione. Associabile a dati dinamici.
Ridimens.	Consente di stabilire la modalità di visualizzazione di immagini di diverse dimensioni all'interno di frame con dimensione fissa. Scopri di più. Ridimensiona immagine per adattarla Ritaglia immagine per riempire lo spazio Nessuno Estendi immagine per riempire lo spazio
Frame iniziale	Quale frame si vuole visualizzare inizialmente (1 è il primo frame).
Autoplay
Autoplay	Se selezionata, questa opzione consente di riprodurre automaticamente i frame nella galleria. Il tempo totale impiegato per riprodurre l'intera galleria viene visualizzato nel riquadro Frame quando questa opzione è attivata.
Intervallo	Per quanto tempo è visibile ogni frame, in secondi. Si applica solo se è selezionato Autoplay.
Ripetizione	Il numero di volte in cui riprodurre i frame nella galleria; 0 indica il loop infinito. Si applica solo se è selezionato Autoplay.
Interazione
Aggrega	Se selezionata, questa opzione consente di spostarsi dall'ultimo frame al primo.
Gesto	Il gesto dell'utente che modifica il frame corrente nella galleria. Nessuno Clic (impostazione predefinita) Scorrimento (disponibile solo per alcuni tipi di transizione*) Oltre al gesto selezionato, gli utenti possono utilizzare i punti elenco di navigazione se li attivi o qualsiasi controllo di navigazione personalizzato impostato mediante gli eventi.
Ignora scorrimento inverso	Se selezionata, il componente non risponde ai gesti di scorrimento nella direzione opposta dell'effetto di animazione, quindi l'utente non può passare al frame precedente. Si applica solo se la proprietà Gesto è impostata su Scorrimento e l'opzione Attiva transizione interattiva non è selezionata.
Attiva transizione interattiva	Se selezionata, l'animazione di transizione segue il mouse dell'utente. Disponibile solo se la proprietà Gesto può essere impostata su Scorrimento.*
Navigazione
Includi	Se selezionata, la galleria mostra i punti elenco di navigazione.
Miniature	Se selezionata, la galleria visualizza un'anteprima di ciascun frame per la navigazione.
Evidenziazione	Imposta il colore di evidenziazione per la cornice attualmente visualizzata.
Avanzate
URL di uscita	Un elenco separato da virgole di URL di uscita, uno per ciascun frame. Associabile a dati dinamici.

 

* Supporto del gesto Scorrimento

I seguenti tipi e stili di transizione supportano lo scorrimento:

• Spinta - Normale
• Sezione
• A comparsa - Normale
• A comparsa - Strisce
• Veneziane - Normale

Eventi e azioni

Eventi inviati dal componente Galleria con transizione

Puoi attivare altre azioni basate sui seguenti eventi del componente Galleria con transizione:

Evento	Descrizione
Riproduzione automatica terminata	Inviato quando la riproduzione automatica viene terminata per qualsiasi motivo. event.detail.completed è true se termina naturalmente al raggiungimento del numero previsto di loop; in caso contrario è false.
Frame attivato	Inviato quando un nuovo frame inizia a essere attivo, anche se non è ancora visibile.
Frame mostrato	Inviato quando viene mostrato un nuovo frame.
Tocco del frame	Inviato quando un utente tocca un frame.
Rotazione singola terminata	Inviato quando la rotazione viene terminata per qualsiasi motivo. event.detail.completed è true se termina naturalmente; in caso contrario è false.
Estremità sinistra	Inviato quando la galleria raggiunge l'estremità sinistra.
Estremità destra	Inviato quando la galleria raggiunge l'estremità destra.

Per selezionare uno di questi eventi nella finestra di dialogo Eventi, imposta il componente Galleria con transizione come target.

Azioni eseguite dal componente Galleria con transizione

Le seguenti azioni del componente Galleria con transizione possono essere attivate in risposta ad altri eventi:

Azione	Opzioni di configurazione
Vai a frame	Numero frame Animazione
Ruota una volta	Inizia dal frame corrente
Avvia riproduzione automatica	Inizia dal frame corrente
Interruzione	nessuna
Avanti	nessuna
Indietro	nessuna

Se selezioni una di queste azioni nella finestra di dialogo Evento, imposta il componente Galleria con transizione come destinatario.

Scopri come configurare gli eventi.

Anteprima

In modalità Struttura della finestra di dialogo Galleria con transizione, puoi fare clic sul pulsante Play nel riquadro Frame per vedere come appare la transizione di base, a partire dal frame attualmente selezionato. Le modifiche apportate alle proprietà durante la riproduzione dell'anteprima diventano subito effettive.

Passa alla scheda Anteprima per vedere come funziona la Galleria con transizione con le proprietà impostate, tra cui la riproduzione automatica e le opzioni di interazione.

Puoi anche visualizzare l'anteprima del documento nel tuo browser preferito facendo clic su Salva nella parte inferiore della finestra di dialogo, quindi sul pulsante Anteprima.