Dopo aver creato le animazioni nella sequenza temporale, puoi regolarle modificando elementi animati, fotogrammi chiave e sezioni. Inoltre, puoi impostare il loop dell'animazione.
Argomenti trattati in questa pagina:
Modificare un elemento animato
Quando modifichi le proprietà di un elemento animato, viene aggiunto automaticamente un fotogramma chiave in corrispondenza della testina di riproduzione qualora non ne fosse già presente uno in quella posizione. Puoi inoltre selezionare un fotogramma chiave esistente per modificare l'elemento in quel punto specifico della sequenza temporale. Le animazioni precedenti o successive vengono regolate di conseguenza per iniziare o terminare con le proprietà modificate.
Se apporti modifiche alle proprietà nel primo fotogramma chiave, modifichi le proprietà di base dell'elemento. I fotogrammi chiave successivi ereditano le proprietà di base, a meno che non specifichi valori diversi per le loro proprietà.
Se selezioni più fotogrammi chiave e modifichi le proprietà dell'elemento o degli elementi, le modifiche vengono applicate a tutti i fotogrammi chiave selezionati.
Se non è necessario che un elemento sia presente per la sequenza temporale di animazione completa, potresti voler impostare il relativo intervallo di visibilità in modo che sia nascosto al di fuori del livello.
Modificare l'easing di un'animazione
Per modificare l'easing di un'animazione, fai clic con il pulsante destro del mouse sulla sezione che vuoi cambiare e seleziona un nuovo easing oppure Opzioni di easing… per specificare l'easing personalizzato.
Impostare il loop di un'animazione
- Nella sequenza temporale, fai clic sul pulsante Imposta ripetizione animazione
sul livello di animazione a cui vuoi applicare il loop.
- Seleziona un'opzione nel menu popup:
- Infinita: l'animazione si ripete all'infinito.
- ___ volte: l'animazione si ripete in totale per il numero di volte che hai specificato.
- Nessuna: l'animazione non si ripete.
I livelli con intervalli di visibilità non possono essere in loop.
L'impostazione del loop di un livello modifica l'animazione nel documento pubblicato.
Il loop della riproduzione dell'animazione incide soltanto sull'anteprima nello stage.
Modificare i fotogrammi chiave e le sezioni nella sequenza temporale
Selezionare fotogrammi chiave e sezioni
Ci sono diversi modi per selezionare fotogrammi chiave e sezioni:
- Fai clic su un fotogramma chiave o su una sezione per selezionarli. La selezione di due fotogrammi chiave consecutivi comporta anche la selezione della sezione presente tra un fotogramma e l'altro. Analogamente, la selezione di una sezione comporta automaticamente anche la selezione dei relativi fotogrammi chiave.
- Fai clic tenendo premuto MAIUSC per selezionare più sezioni o fotogrammi chiave adiacenti.
- Fai clic tenendo premuto Ctrl (Windows) o ⌘ (Mac) per selezionare o deselezionare sezioni o fotogrammi chiave non adiacenti.
- Fai clic e trascina una cornice intermittente di selezione rettangolare per selezionare tutti i fotogrammi chiave all'interno del rettangolo. Le sezioni vengono selezionate solo se entrambi i relativi fotogrammi chiave vengono inclusi nella cornice intermittente.
- Fai clic e trascina una cornice intermittente tenendo premuto Ctrl (Windows) o ⌘ per selezionare o deselezionare i fotogrammi chiave. Verranno selezionati i fotogrammi chiave all'interno del rettangolo che non sono attualmente selezionati, mentre i fotogrammi chiave già selezionati verranno deselezionati. Anche in questo caso, le sezioni saranno interessate solo se entrambi i relativi fotogrammi chiave vengono inclusi nella cornice intermittente.
-
Fai doppio clic su un livello all'interno della sequenza temporale per selezionare tutti i fotogrammi chiave, le sezioni e i punti di manipolazione degli intervalli di visibilità su quel livello.
Spostare fotogrammi chiave e sezioni
Dopo aver selezionato fotogrammi chiave o sezioni, puoi spostarli trascinandoli lungo la sequenza temporale in una nuova posizione. La durata dell'animazione cambia di conseguenza.
Ridimensionare le animazioni
È possibile ridimensionare le animazioni per renderle più lunghe o più corte mantenendo proporzionale la spaziatura tra i fotogrammi chiave. Per ridimensionare un'animazione:
- Seleziona i fotogrammi chiave o le sezioni che vuoi ridimensionare. Possono essere su livelli diversi.
- Tieni premuto MAIUSC mentre trascini uno dei fotogrammi chiave selezionati verso sinistra o destra. La lunghezza dell'animazione aumenta o si riduce a seconda che tu stia trascinando il fotogramma in direzione del punto centrale dell'animazione o in senso opposto. Gli altri fotogrammi chiave selezionati si sposteranno di una distanza proporzionale, ad eccezione del fotogramma chiave all'estremità più lontana, che rimane stazionario.
- Se hai attivato l'agganciamento della sequenza temporale, questo viene applicato solo al fotogramma chiave trascinato.
- I fotogrammi chiave non possono sovrapporsi o distare meno di 0,1 ms l'uno dall'altro.
- I fotogrammi chiave non selezionati non si spostano, ma possono limitare il movimento dei fotogrammi chiave selezionati.
Ridimensionamento dei fotogrammi chiave nella sequenza temporale
Copiare e incollare un fotogramma chiave
Puoi copiare e incollare un fotogramma chiave in una diversa posizione temporale sullo stesso livello, in un altro livello o persino nella sequenza temporale di una pagina o di un documento diversi. Il fotogramma chiave incollato manterrà le sue proprietà animate, ma non l'easing o eventuali percorsi di animazione.
Puoi copiare e incollare un fotogramma chiave utilizzando uno dei seguenti metodi:
-
Seleziona il fotogramma chiave da copiare, premi Ctrl + C (Windows) o ⌘ + C (Mac), quindi fai clic sulla nuova posizione nella sequenza temporale e seleziona il livello o i livelli di destinazione. Premi Ctrl+V (Windows) o ⌘+V (Mac) per incollare.
-
Fai clic con il pulsante destro del mouse sul fotogramma chiave da copiare. Seleziona Copia fotogramma chiave dal menu popup, quindi fai clic con il pulsante destro del mouse sulla nuova posizione nella sequenza temporale in corrispondenza del livello di destinazione e seleziona Incolla fotogramma chiave dal menu popup.
-
Fai clic su un fotogramma chiave tenendo premuto Alt (Windows), Opzione (Mac) o Alt (Linux) e trascinalo per duplicarlo nella posizione finale. Questo metodo non funziona tra più pagine, documenti o sequenze temporali per le animazioni nidificate.
Se copi e incolli un fotogramma chiave in un livello che in precedenza non aveva fotogrammi chiave, verrà inserito automaticamente un nuovo fotogramma chiave nella posizione 0s insieme al fotogramma chiave incollato, a meno che tu stia incollando il fotogramma chiave in tale posizione.
Se copi e incolli un fotogramma chiave su un fotogramma chiave esistente, le proprietà animate del fotogramma chiave incollato sovrascriveranno le proprietà animate corrispondenti del fotogramma chiave esistente.
Eliminare fotogrammi chiave
Per eliminare un fotogramma chiave, fai clic con il pulsante destro del mouse (Windows) o tieni premuto Ctrl (Mac) e fai clic sul fotogramma chiave, quindi seleziona Elimina dal menu popup.
Modificare le regole dei fotogrammi chiave nel riquadro CSS
Se conosci le regole CSS per i fotogrammi chiave (che iniziano con la parola chiave @keyframes), puoi usare il riquadro CSS per visualizzare e modificare gli stili dell'animazione in Vista struttura. Le modifiche che apporti nel riquadro vengono applicate automaticamente nella sequenza temporale e sullo stage.
Usare le regole dei fotogrammi chiave
- Seleziona un singolo elemento animato per visualizzare la regola dei fotogrammi chiave relativa all'elemento in questione nel riquadro CSS.
- Aggiungi fotogrammi chiave tra i fotogrammi chiave esistenti facendo clic su Inserisci fotogramma chiave.
- Modifica le percentuali dei fotogrammi chiave.
- Aggiungi, modifica ed elimina proprietà animate per un fotogramma chiave.
- Attiva o disattiva una proprietà animata in tutta l'animazione facendo clic sulla casella di controllo accanto al nome della proprietà.
- Elimina un singolo fotogramma chiave cancellando la percentuale o eliminando tutte le proprietà animate relative al fotogramma chiave in questione.
- Elimina tutta l'animazione CSS di un elemento selezionando la regola dei fotogrammi chiave e facendo clic sul pulsante Elimina regole selezionate
nella parte inferiore del riquadro.
Modificare le regole dei fotogrammi chiave nel riquadro CSS
Limitazioni
- Non puoi modificare l'easing.
- Non puoi aggiungere un fotogramma chiave dopo l'ultimo fotogramma chiave. Devi usare la sequenza temporale.
Scopri di più sull'utilizzo del riquadro CSS.