Editor Studio: aggiungere un'animazione in loop
Tempo di lettura: 4 min.
Crea un senso di movimento nel tuo design con animazioni che si ripetono ininterrottamente. Puoi aggiungere un'animazione in loop a qualsiasi elemento che vuoi che i visitatori notino: alcuni sono più discreti, altri attirano maggiormente l'attenzione.
![Esempio di elemento maschera di testo con animazione in loop su un sito live](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/f409ba72-a6c8-4700-af6a-881d90c3955e/39264414-a46e-4610-9022-713ffcbb4283.gif)
In questo articolo, scopri di più su come:
Suggerimento:
Quando aggiungi un'animazione sul punto di interruzione del desktop, questa si estende ai punti di interruzione più piccoli. Tuttavia, puoi impostare un'animazione diversa o personalizzare la stessa animazione, per punto di interruzione.
Aggiungere un'animazione in loop
Puoi aggiungere un'animazione in loop a elementi e sezioni specifici o alla pagina del sito nel suo complesso.
Per aggiungere un'animazione in loop
- Seleziona l'elemento o la sezione pertinente
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor
- Clicca sulla scheda Interazioni
- Clicca su + Aggiungi sotto Loop
- Seleziona un'animazione dall'elenco
Suggerimento: passa il mouse sulle animazioni per visualizzarne un'anteprima
![GIF che mostra le animazioni in loop disponibili e come passare il mouse sopra di esse mostra un'anteprima](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/e808436f-41ad-4d8f-9c6a-94d6034eadd2/e2b5e0b1-98ff-4462-83ac-c1b948a0862d.gif)
Personalizzare un'animazione in loop
Dopo aver scelto un'animazione, impostala in modo che si comporti come desideri. Scegli la durata dell'animazione, imposta l'intensità, aggiungi un ritardo tra le ripetizioni e altro ancora.
Per personalizzare un'animazione in loop:
- Seleziona l'elemento, la sezione o la pagina pertinente
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor
- Clicca sulla scheda Interazioni
- Clicca sull'animazione che vuoi modificare
- Clicca su Regola animazione per modificarne le impostazioni:
- Direzione: scegli la direzione da cui dovrebbe provenire l'animazione (es. da sinistra, dall'alto)
- Intensità: rendi questa animazione più o meno discreta o aggressiva
- Durata: modifica la durata dell'animazione
- Ritardo ripetizioni: aggiungi un ritardo (in secondi) tra le ripetizioni in loop dell'animazione
- Interpolazione: scegli quanto gradualmente l'animazione deve entrare e/o uscire
Nota:
Le impostazioni disponibili dipendono dall'animazione che hai scelto.
![Screenshot delle opzioni di regolazione disponibili per l'animazione Respiro in loop](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/081df38f-3060-4b91-9238-f9b2f9504a5d/7df8c1d2-63f0-4773-aba5-dbc72b876929.png)
Rimuovere un'animazione in loop
Puoi rimuovere un'animazione in loop in qualsiasi momento dal pannello Ispezione.
Per rimuovere un'animazione in loop:
- Seleziona l'elemento, la sezione o la pagina pertinente
- Clicca sulla freccia Apri Ispezione
in alto a destra dell'Editor
- Clicca sulla scheda Interazioni
- Passa il mouse sull'animazione e clicca sull'icona Altre azioni
- Clicca su Rimuovi
![Rimozione di un'animazione in loop dal pannello Ispezione](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/11e495ca-9948-4307-bbd7-e3fb3d089527/6c3a8524-d91a-416c-a1ed-f7b22c06c6bf.png)
Hai trovato utile questo articolo?
|