Informazioni sull'easing

L'easing consente di modificare l'accelerazione e la decelerazione della transizione di un'animazione. Google Web Designer offre i cinque tipi di funzioni di easing standard definiti nella specifica CSS3, oltre a transizioni di tipo step e un'opzione di easing personalizzato nella modalità avanzata.

Nota: sono disponibili diverse opzioni di easing per gli effetti di testo.

Easing in modalità veloce

Nella modalità veloce, lo stesso easing viene applicato a tutti gli elementi animati tra le miniature.

Se modifichi degli easing in modalità avanzata, potresti vedere la scritta "Misto" in riferimento al tipo di easing quando passi alla modalità veloce.

Per modificare l'easing in modalità veloce, procedi nel seguente modo:

1. Fai clic sul pulsante Opzioni fotogrammi chiave tra le miniature.
2. Viene visualizzato l'editor delle transizioni.
   

3. Nell'editor delle transizioni, fai clic sulle frecce per scorrere i tipi di easing predefiniti. Puoi anche modificare la durata dell'easing inserendo una quantità di tempo in secondi oppure facendo clic sul campo del tempo e spostandoti verso sinistra o verso destra.

Preset di easing predefiniti

Preset di easing	Descrizione
Lineare	Le animazioni cambiano a velocità costante.
Ease	Le animazioni all'inizio hanno una velocità media e rallentano verso la fine.
Ease-out	Le animazioni sono veloci all'inizio e più lente verso la fine.
Ease-in	Le animazioni sono lente all'inizio e veloci alla fine.
Ease-in-out	Le animazioni sono lente all'inizio e alla fine, ma si muovono velocemente nella fase intermedia.
Step-end	Durante il periodo di variazione le animazioni rimangono nella posizione iniziale, quindi passano direttamente alla posizione finale.
Step-start	Le animazioni passano subito alla posizione finale.

Easing in modalità avanzata

La modalità avanzata offre ulteriori opzioni di easing:

• Modificare l'easing per più sezioni contemporaneamente.
• Specificare un easing personalizzato.
• Salvare l'easing personalizzato come nuovo preset per riutilizzarlo facilmente in altre sezioni.

Per modificare l'easing in modalità avanzata:

1. Fai clic con il pulsante destro del mouse sulla sezione con animazione avente l'easing che vuoi modificare. Per modificare più easing contemporaneamente, seleziona sezioni adiacenti facendo clic tenendo premuto MAIUSC oppure seleziona sezioni non adiacenti facendo clic tenendo premuto CTRL (Windows) o COMANDO (Mac), quindi facendo clic con il pulsante destro del mouse su una delle sezioni selezionate. (Saranno modificati solo gli easing delle sezioni con animazione.)

2. Seleziona uno dei preset di easing dal menu popup o seleziona Opzioni di easing... per vedere immagini delle curve di easing o specificare l'easing personalizzato.

Per creare l'easing personalizzato, procedi nel seguente modo:

1. Fai clic con il pulsante destro su una sezione e seleziona Opzioni di easing… per aprire la finestra di dialogo di easing.
2. Per modificare l'easing, usa uno dei seguenti metodi:
   • Trascina i punti di manipolazione di controllo per regolare la forma della curva di easing. L'angolazione dei punti di manipolazione di controllo stabilisce la curvatura, mentre la relativa lunghezza stabilisce la potenza di accelerazione o decelerazione.
   • Nel campo Curva di Bézier cubica, inserisci la notazione funzionale cubic-bezier() della curva di Bézier che desideri. Se inserisci un valore non valido, il campo verrà sottolineato in rosso.
3. Se vuoi, salva l'easing personalizzato come preset facendo clic su Salva come nuovo preset.
4. Fai clic su Applica per utilizzare questo easing personalizzato per le sezioni selezionate.
   

Preset di easing personalizzati

Se preferisci riutilizzare un easing personalizzato per più sezioni, salvalo come preset. I preset offrono i seguenti vantaggi:

• Accesso rapido: i preset di easing vengono visualizzati come opzioni nel menu popup quando fai clic con il tasto destro su una sezione.
• Facile identificazione: i nomi dei preset vengono visualizzati sulla sequenza temporale in modalità avanzata.

I preset personalizzati sono salvati sul tuo Google Web Designer e possono essere utilizzati in diversi documenti. Se apri un documento contenente un preset personalizzato di un utente diverso, il nome visualizzato per l'easing sarà "personalizzato" al posto del suo nome effettivo. La curva di easing in sé non verrà modificata.

Per salvare un nuovo preset personalizzato, crea un easing personalizzato nella finestra di dialogo Opzioni di easing e fai clic su Salva come nuovo preset per assegnargli un nome. I nomi dei preset e delle curve di Bézier cubiche devono essere univoci. Se esistono delle sezioni con lo stesso valore personalizzato, appariranno con il nome del preset personalizzato.

Per rinominare un preset personalizzato, fai doppio clic sullo stesso oppure passaci sopra il mouse nella finestra di dialogo Opzioni di easing e fai clic sull'icona a forma di matita che appare accanto al nome del preset. Modifica il nome e premi Invio. Le sezioni che utilizzavano questo preset mostreranno il nuovo nome.

Per eliminare un preset personalizzato, passaci il mouse sopra nella finestra di dialogo Opzioni di easing e fai clic sull'icona a forma di cestino che appare accanto al nome del preset. Le sezioni che utilizzavano questo preset non subiranno modifiche ma saranno visualizzate come personalizzate.

Non puoi modificare la curva di un preset esistente. Puoi invece creare un nuovo preset personalizzato e applicarlo alle sezioni che vuoi cambiare.