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.
Vai alla nostra Wix Studio Academy (contenuti in inglese) per dare un'occhiata a webinar, tutorial e corsi aggiuntivi su Wix Studio.
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 pertinente
- Clicca sull'icona Apri Ispezione
in alto a destra dell'Editor
![Screenshot dell'apertura del pannello Ispezione nell'Editor Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- Clicca sulla scheda Animazioni ed effetti
- 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 pertinente
- Clicca sull'icona Apri Ispezione
in alto a destra dell'Editor
![Screenshot dell'apertura del pannello Ispezione nell'Editor Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- Clicca sulla scheda Animazioni ed effetti
- 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 pertinente
- Clicca sull'icona Apri Ispezione
in alto a destra dell'Editor
![Screenshot dell'apertura del pannello Ispezione nell'Editor Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- Clicca sulla scheda Animazioni ed effetti
- 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/2024/08/07/3802d9f8-945b-41c6-b4da-84726b1455dc/27ead035-4ea2-4ac4-a6b4-6a92acfbabab.png)