I percorsi di animazione ti consentono di animare gli oggetti facendoli spostare lungo curve e forme complesse. In modo simile alle linee tracciate con lo strumento Penna, puoi definire i percorsi di animazione impostando punti di ancoraggio che vengono poi collegati tramite linee rette o curve.
L'animazione dei percorsi viene approssimata da CSS, quindi gli elementi animati potrebbero non seguire esattamente i relativi percorsi di animazione. In genere la differenza è impercettibile (per impostazione predefinita è meno di un pixel) e puoi limitare l'entità della deviazione nelle proprietà dei percorsi di animazione.
Informazioni sui percorsi di animazione
Argomenti trattati in questa pagina:
Visualizzare i percorsi di animazione
Seleziona un singolo elemento o un gruppo per visualizzare le linee che indicano il percorso che verrà seguito durante l'animazione, oltre ai punti di ancoraggio.
Punti di ancoraggio
I punti di ancoraggio vengono impostati in due modi:
- In caso di miniature o fotogrammi chiave che rappresentano una nuova posizione x o y dell'elemento, i punti di ancoraggio vengono generati automaticamente. I punti di ancoraggio iniziali e finali sono sempre in corrispondenza di fotogrammi chiave.
- Puoi aggiungere punti di ancoraggio lungo il percorso di animazione usando lo strumento Percorso animazione.
Punti di manipolazione di controllo
I punti di manipolazione di controllo sono visibili quando viene selezionato lo strumento Percorso animazione . Ogni segmento tra i punti di ancoraggio ha due punti di manipolazione di controllo, uno per ogni punto di ancoraggio. La lunghezza e la direzione dei punti di manipolazione di controllo determinano il grado di curvatura del percorso di animazione. Per le linee rette, i punti di manipolazione di controllo sono allineati al segmento o sono compressi.
Modificare i percorsi di animazione
Modificare la forma dei percorsi di animazione
I percorsi di animazione possono essere semplici curve, forme chiuse come poligoni o cerchi oppure profili dettagliati di altri oggetti. Per cambiare la forma di un percorso di animazione, procedi nel seguente modo:
Aggiungi un punto di ancoraggio
- Aggiungi una miniatura o un fotogramma chiave che cambi la posizione dell'elemento. Viene aggiunto un punto di ancoraggio in corrispondenza del quale puoi cambiare l'easing.
- L'opzione Aggiungi punto di ancoraggio
dello strumento Percorso animazione
ti consente di fare clic su un punto del percorso di animazione per aggiungere un punto di ancoraggio e sistemare il percorso in quella posizione. Se aggiungi un punto di ancoraggio con questo metodo non vengono aggiunti un fotogramma chiave o una miniatura.
Regolare la curvatura
- Se sono selezionati lo strumento Selezione oppure l'opzione predefinita
dello strumento Percorso animazione
- Se è selezionato lo strumento Percorso animazione
- Fai doppio clic su un punto di ancoraggio per comprimere i punti di manipolazione di controllo aggiunti. Fai ancora doppio clic per estendere i punti di manipolazione di controllo.
Per raddrizzare un percorso di animazione, fai doppio clic su entrambi i punti di ancoraggio.
Eliminare un punto di ancoraggio
- L'opzione Elimina punto di ancoraggio
dello strumento Percorso animazione
- Se elimini una miniatura o un fotogramma chiave, viene eliminato anche il segmento del percorso di animazione che termina in corrispondenza della miniatura o del fotogramma chiave.
Trasformare i percorsi di animazione
Puoi spostare, ridimensionare, capovolgere o ruotare i percorsi di animazione selezionando lo strumento Percorso animazione e poi selezionando la casella Comando Trasforma nella barra di opzioni dello strumento. Quando questa opzione è attiva, i comandi di trasformazione vengono visualizzati quando selezioni un elemento con un percorso di animazione.
Spostare un percorso di animazione
Trascina il percorso di animazione in una nuova posizione sullo stage.
Ridimensionare il percorso di animazione
- La casella di ridimensionamento che delimita il percorso di animazione è blu e ha punti di manipolazione in ogni angolo e su ogni lato. Trascina un punto di manipolazione per cambiare le dimensioni del percorso di animazione.
- Tieni premuto il tasto MAIUSC durante il trascinamento per mantenere le proporzioni originali.
- Tieni premuto il tasto ALT durante il trascinamento per mantenere il percorso di animazione centrato nello stesso punto.
- Per ridimensionare il percorso di animazione in un'altra direzione, ruota la casella di ridimensionamento inserendo i gradi della rotazione nel campo
nella barra di opzioni dello strumento. Puoi anche tenere premuto il tasto Alt (Windows) oppure Opzione (Mac) mentre premi il tasto Freccia sinistra o destra per ruotare la casella di ridimensionamento di 5°. Il campo viene sempre reimpostato a 0°, quindi dovresti inserire la rotazione che vuoi dall'orientamento attuale. La rotazione della casella di ridimensionamento non cambia l'orientamento del percorso di animazione stesso.
- Per reimpostare l'orientamento della casella di ridimensionamento, fai doppio clic sul controllo di rotazione interno (l'anello più piccolo). Viene reimpostata anche la posizione del punto pivot di rotazione.
nella barra di opzioni dello strumento. Puoi anche tenere premuto il tasto Alt (Windows) oppure Opzione (Mac) mentre premi il tasto Freccia sinistra o destra per ruotare la casella di ridimensionamento di 5°. Il campo viene sempre reimpostato a 0°, quindi dovresti inserire la rotazione che vuoi dall'orientamento attuale. La rotazione della casella di ridimensionamento non cambia l'orientamento del percorso di animazione stesso.Capovolgere il percorso di animazione
- Trascina un punto di manipolazione di ridimensionamento sopra l'equivalente opposto.
Ruotare il percorso di animazione
- Trascina il controllo di rotazione esterno (l'anello più grande) in senso orario o antiorario per ruotare il percorso di animazione.
- Tieni premuto il tasto MAIUSC durante il trascinamento per vincolare la rotazione a incrementi di 45°.
- Per spostare il punto pivot per la rotazione, trascina il controllo di rotazione interno (l'anello più piccolo) in un'altra posizione. Reimposta la posizione del punto pivot facendo doppio clic sul controllo di rotazione interno (viene reimpostato anche l'orientamento della casella di ridimensionamento).
Modifica del percorso di animazione
Modificare la velocità di animazione
Stabilisci la velocità di un oggetto lungo il relativo percorso di animazione cambiando la durata delle miniature o dei fotogrammi chiave, nonché l'easing tra questi elementi. Puoi anche impostare la ripetizione continua dell'animazione del percorso.
Ottimizzazione
Quando crei o modifichi un percorso di animazione, Google Web Designer ottimizza automaticamente l'animazione riducendo la quantità di codice CSS usata per visualizzarla tenendo conto delle tolleranze da te specificate nelle proprietà del percorso di animazione. Più i valori di tolleranza sono bassi, più l'animazione sarà fedele al percorso di animazione, ma sarà possibile una minore ottimizzazione.
Per una maggiore compressione, fai clic su Ottimizza curva nelle proprietà del percorso di animazione. Questa procedura potrebbe richiedere più tempo dell'ottimizzazione automatica.
Nel riquadro Proprietà di Google Web Designer vengono indicate le dimensioni stimate del percorso di animazione dell'elemento selezionato, che rispecchiano la quantità di spazio su disco occupata dal percorso di animazione dopo la pubblicazione del documento.
Proprietà dei percorsi di animazione
Le proprietà dei percorsi di animazione vengono mostrate nel riquadro Proprietà dopo avere aggiunto un punto di ancoraggio con lo strumento Percorso animazione o aver impostato una curva per il percorso di animazione.
| Proprietà | Descrizione |
|---|---|
| Orientamento in base al percorso di animazione | Se viene attivata questa proprietà, l'elemento ruota durante l'animazione in base alla direzione del percorso di animazione (ad esempio, per seguire la curva discendente di un percorso di animazione, l'elemento si inclina verso il basso). Regola la precisione della rotazione con la proprietà Tolleranza angolo. |
| Tolleranza posizione | Consente di impostare la distanza massima dell'elemento dal percorso di animazione.
|
| Tolleranza angolo | Consente di stabilire la differenza massima tra l'orientamento dell'elemento e l'orientamento del percorso di animazione. Applicabile soltanto se viene attivata l'opzione Orientamento in base al percorso di animazione.
|
| Ottimizza curva | Fai clic sul pulsante |
| Stima dimensioni | Vengono indicate le dimensioni stimate del percorso di animazione. Per una maggiore compressione, usa il pulsante Ottimizza curva. |
Limitazioni
- Posizionamento in alto/a sinistra. I percorsi di animazione non supportano il posizionamento in alto/a sinistra. Usa la proprietà CSS
transform(impostazione predefinita). - Animazione 3D. Google Web Designer non supporta i percorsi di animazione 3D. Puoi applicare separatamente le traslazioni 3D all'elemento.
- Riquadro CSS. Le impostazioni del riquadro CSS non incidono sui percorsi di animazione, anche se gli stili vengono comunque applicati all'elemento.
- Vista codice. Non puoi visualizzare o modificare i percorsi di animazione in Vista codice.
- Annunci illustrati: lo strumento Percorso animazione non è disponibile negli annunci illustrati.