Prima che la mia carriera entrasse nello sviluppo, ho svolto un sacco di lavori di grafica animata in After Effects. Ma anche con quello sfondo, trovavo comunque l'animazione sul web piuttosto sconcertante.
La grafica video viene progettata all'interno di un rapporto specifico e quindi esportata. Fatto! Ma non ci sono "impostazioni di esportazione" sul web. Inviamo semplicemente il codice nel mondo e le nostre animazioni devono adattarsi a qualsiasi dispositivo su cui atterrino.
Quindi parliamo di animazione reattiva! Come ci avviciniamo al meglio all'animazione nel selvaggio web selvaggio? Tratteremo alcuni approcci generali, alcuni suggerimenti specifici per GSAP e alcuni principi di movimento. Iniziamo con un po' di inquadratura...
Come verrà utilizzata questa animazione?
L'articolo di Zach Saucier sull'animazione reattiva consiglia di fare un passo indietro per pensare al risultato finale prima di passare al codice.
L'animazione sarà un modulo ripetuto in più parti dell'applicazione? Ha bisogno di scalare? Tenere a mente questo può aiutare a determinare il metodo in cui un'animazione dovrebbe essere ridimensionata e impedirti di sprecare fatica.
Questo è un ottimo consiglio. UN Enorme parte della progettazione di un'animazione reattiva è sapere se e come l'animazione deve essere ridimensionata e quindi scegliere l'approccio giusto dall'inizio.
La maggior parte delle animazioni rientra nelle seguenti categorie:
- Fisso: Animazioni per elementi come icone o caricatori che mantengono le stesse dimensioni e proporzioni su tutti i dispositivi. Niente di cui preoccuparsi qui! Codifica alcuni valori di pixel lì dentro e vai avanti con la tua giornata.
- Fluido: Animazioni che devono adattarsi in modo fluido a diversi dispositivi. La maggior parte delle animazioni di layout rientrano in questa categoria.
- Mirati: Animazioni specifiche per un determinato dispositivo o dimensioni dello schermo o che cambiano sostanzialmente a un determinato punto di interruzione, come animazioni solo desktop o interazioni che si basano sull'interazione specifica del dispositivo, come tocco o passaggio del mouse.
Animazioni fluide e mirate richiedono modi di pensare e soluzioni differenti. Diamo un'occhiata…
Animazione fluida
As Andy bell dice: Sii il mentore del browser, non il suo micromanager: dai al browser alcune regole e suggerimenti solidi, quindi lascia che prenda le decisioni giuste per le persone che lo visitano.
(Ecco le diapositive da quella presentazione.)
L'animazione fluida consiste nel lasciare che il browser faccia il duro lavoro. Molte animazioni possono adattarsi facilmente a contesti diversi semplicemente utilizzando le unità giuste dall'inizio. Se ridimensioni questa penna puoi vedere che l'animazione utilizza unità viewport si ridimensiona in modo fluido man mano che il browser si adatta:
La casella viola cambia anche la larghezza in diversi punti di interruzione, ma poiché utilizziamo le percentuali per spostarla, anche l'animazione si ridimensiona insieme ad essa.
Animazione di proprietà del layout come left ed top può causare ridisposizioni del layout e animazioni "stravaganti" nervose, quindi, ove possibile, attenersi a trasformazioni e opacità.
Tuttavia, non ci limitiamo solo a queste unità: diamo un'occhiata ad alcune altre possibilità.
Unità SVG
Una delle cose che amo del lavorare con SVG è che possiamo usare le unità utente SVG per l'animazione che sono reattive immediatamente. L'indizio è davvero nel nome... Scalabile Grafica vettoriale. In SVG-land, tutti gli elementi sono tracciati su coordinate specifiche. Lo spazio SVG è come un pezzo infinito di carta millimetrata in cui possiamo disporre gli elementi. Il viewBox definisce le dimensioni della carta millimetrata che possiamo vedere.
viewBox="0 0 100 50”In questa prossima demo, il nostro SVG viewBox is 100 unità ampia e 50 unità di altezza. Ciò significa che animiamo l'elemento di 100 unità lungo l'asse x, si sposterà sempre dell'intera larghezza del suo SVG genitore, non importa quanto grande o piccolo sia quell'SVG! Dai alla demo un ridimensionamento per vedere.
Animare un elemento figlio in base alla larghezza di un contenitore genitore è un piccolo trucco in HTML-land. Fino ad ora, abbiamo dovuto prendere la larghezza del genitore con JavaScript, il che è abbastanza facile quando stai animando from una posizione trasformata, ma un po' più complicata durante l'animazione to da qualche parte come puoi vedere nella seguente demo. Se il tuo punto finale è una posizione trasformata e ridimensioni lo schermo, dovrai regolare manualmente quella posizione. Disordinato... 🤔
Se regoli i valori durante il ridimensionamento, ricorda di farlo antirimbalzoo anche attivare la funzione al termine del ridimensionamento del browser. I listener di ridimensionamento attivano una tonnellata di eventi ogni secondo, quindi l'aggiornamento delle proprietà di ciascun evento richiede molto lavoro per il browser.
Ma questo aumento di velocità dell'animazione diventerà presto un ricordo del passato! Rullo di tamburi per favore... 🥁
Unità container! Roba adorabile. Nel momento in cui scrivo questo, funzionano solo in Chrome e Safari, ma forse quando leggerai questo, avremo anche Firefox. Dai un'occhiata in azione in questa prossima demo. Guarda quei ragazzini andate! Non è così eccitante l'animazione relativa agli elementi principali!
Questi dati di supporto del browser provengono da Posso usare, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Chrome | Firefox | IE | bordo | Safari |
|---|---|---|---|---|
| 105 | Non | Non | 105 | 16.0 |
Cellulare/Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 106 | Non | 106 | 16.0 |
Transizioni fluide del layout con FLIP
Come accennato in precedenza, in SVG-land ogni elemento è posizionato ordinatamente su una griglia e davvero facile da spostare in modo reattivo. In HTML-land è molto più complesso. Per creare layout reattivi, utilizziamo diversi metodi di posizionamento e sistemi di layout. Una delle principali difficoltà dell'animazione sul web è quella Un sacco delle modifiche al layout sono impossibili da animare. Forse un elemento ha bisogno di spostarsi dalla posizione relative a fixedo alcuni elementi figlio di un contenitore flessibile devono essere spostati senza problemi nella finestra. Forse un elemento ha anche bisogno di essere re-parented e spostato in una posizione completamente nuova nel DOM.
Difficile, eh?
Bene. La tecnica FLIP è qui per salvare la situazione; ci permette di animare facilmente queste cose impossibili. La premessa di base è:
- Nome: Prendi la posizione iniziale degli elementi coinvolti nella transizione.
- Cognome: sposta gli elementi e prendi la posizione finale.
- Invertire: calcola le modifiche tra il primo e l'ultimo stato e applica le trasformazioni per invertire gli elementi nella loro posizione originale. Questo fa sembrare che gli elementi siano ancora nel prima di tutto posizione ma in realtà non lo sono.
- Giocare: rimuovi le trasformazioni invertite e anima le loro falso prima di tutto stato al ultimo stato.
Ecco una demo che utilizza il plug-in FLIP di GSAP che fa tutto il lavoro pesante per te!
Se vuoi capire un po' di più sull'implementazione di vanilla, vai a Paul Lewis's post sul blog — è il cervello dietro la tecnica FLIP.
Ridimensionamento fluido di SVG
Mi hai preso... questo non lo è veramente un consiglio per l'animazione Ma impostare correttamente la scena è fondamentale per una buona animazione! SVG si adatta molto bene per impostazione predefinita, ma possiamo controllare come si ridimensiona ulteriormente con preserveAspectRatio, che è molto utile quando le proporzioni dell'elemento SVG e il file viewBox le proporzioni sono diverse. Funziona più o meno allo stesso modo del background-position ed background-size proprietà in CSS. La dichiarazione è composta da un valore di allineamento (background-position) E Soddisfare or Taglia riferimento (background-size).
Per quanto riguarda quei riferimenti a Meet e Slice — slice è come background size: covere meet è come background-size: contain.
preserveAspectRatio="MidYMax slice"— Allinea al centro dell'asse x, alla parte inferiore dell'asse y e scala fino a coprire l'intera finestra.preserveAspectRatio="MinYMin meet"— Allinea a sinistra dell'asse x, la parte superiore dell'asse y e aumenta la scala mantenendo l'interoviewBoxvisibile.
Tom Miller fa un ulteriore passo avanti usando overflow: visible in CSS e un elemento contenitore per rivelare "stage left" e "stage right" mantenendo l'altezza limitata:
Per le animazioni SVG reattive, può essere utile utilizzare il riquadro di visualizzazione SVG per creare una vista che ritaglia e ridimensiona al di sotto di una certa larghezza del browser, rivelando anche più dell'animazione SVG a destra e a sinistra quando il browser è più largo di quello soglia. Possiamo raggiungere questo obiettivo aggiungendo l'overflow visibile sull'SVG e unendolo con a
max-heightwrapper per evitare che l'SVG si ridimensioni troppo verticalmente.
Tela in scala fluida
Canvas è molto più performante per animazioni complesse con lotti di parti mobili rispetto all'animazione di SVG o HTML DOM, ma è anche intrinsecamente più complesso. Devi lavorare per quei guadagni in termini di prestazioni! A differenza di SVG che ha unità reattive adorabili e scalabilità immediata, deve essere controllato e microgestito un po'.
Mi piace impostare il mio in modo che funzioni più o meno allo stesso modo di SVG (potrei essere di parte) con un bel sistema di unità in cui lavorare e proporzioni fisse. deve anche essere ridisegnato ogni volta che qualcosa cambia, quindi ricorda di ritardare il ridisegno fino al termine del ridimensionamento del browser, o rimbalzare!
George Francis metti insieme anche questo deliziosa piccola libreria che ti permette di definire una tela viewBox attributo e preserveAspectRatio — esattamente come SVG!
Animazione mirata
A volte potresti dover adottare un approccio meno fluido e più diretto alla tua animazione. I dispositivi mobili hanno molto meno spazio e meno animazione in termini di prestazioni rispetto a una macchina desktop. Quindi ha senso offrire un'animazione ridotta agli utenti mobili, potenzialmente anche senza animazione:
A volte la migliore animazione reattiva per dispositivi mobili non è affatto un'animazione! Per l'esperienza utente mobile, dai la priorità a consentire all'utente di consumare rapidamente i contenuti anziché attendere il completamento delle animazioni. Le animazioni mobili dovrebbero migliorare il contenuto, la navigazione e le interazioni piuttosto che ritardarlo. Eric van Holtz
Per fare ciò, possiamo utilizzare le query multimediali per indirizzare dimensioni specifiche del viewport, proprio come facciamo quando stiliamo con CSS! Ecco una semplice demo che mostra un'animazione CSS gestita utilizzando media query e un'animazione GSAP gestita gsap.matchMedia():
La semplicità di questa demo nasconde un sacco di magia! Le animazioni JavaScript richiedono un po' più di configurazione e pulizia per funzionare correttamente con una sola dimensione dello schermo specifica. Ho visto orrori in passato in cui le persone hanno appena nascosto l'animazione alla vista in CSS con opacity: 0, ma l'animazione continua a sbuffare in background consumando risorse. 😱
Se le dimensioni dello schermo non corrispondono più, l'animazione deve essere uccisa e rilasciata per la raccolta dei rifiuti e gli elementi interessati dall'animazione devono essere ripuliti da qualsiasi stile inline introdotto dal movimento per evitare conflitti con altri stili. Fino al gsap.matchMedia(), questo è stato un processo complicato. Abbiamo dovuto tenere traccia di ogni animazione e gestire tutto manualmente.
gsap.matchMedia() invece ti consente di riporre facilmente il tuo codice di animazione in una funzione che viene eseguita solo quando un particolare media query partite. Quindi, quando non corrisponde più, tutte le animazioni GSAP e ScrollTrigger in quella funzione vengono ripristinati automaticamente. La media query in cui vengono inserite le animazioni fa tutto il duro lavoro per te. È in GSAP 3.11.0 ed è un punto di svolta!
Non siamo nemmeno vincolati alle dimensioni dello schermo. Ci sono tonnellate di funzionalità multimediali là fuori agganciarsi!
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */Nella seguente demo abbiamo aggiunto un controllo per prefers-reduced-motion in modo che tutti gli utenti che trovano l'animazione disorientante non siano infastiditi dalle cose che sfrecciano in giro.
E dai un'occhiata all'altra divertente demo di Tom Miller in cui usa le proporzioni del dispositivo per regolare l'animazione:
Pensare fuori dagli schemi, oltre le dimensioni dello schermo
C'è di più nel pensare all'animazione reattiva oltre alle dimensioni dello schermo. Dispositivi diversi consentono interazioni diverse ed è facile entrare in un groviglio quando non lo si considera. Se stai creando stati al passaggio del mouse in CSS, puoi utilizzare il hover funzione multimediale per verificare se l'utente primario il meccanismo di input può passare sopra gli elementi.
@media (hover: hover) {
/* CSS hover state here */
}Qualche consiglio da Jake Whiteley:
Molte volte basiamo le nostre animazioni sulla larghezza del browser, supponendo ingenuo che gli utenti desktop vogliano gli stati al passaggio del mouse. Personalmente ho avuto molti problemi in passato in cui sarei passato al layout desktop> 1024px, ma potrei eseguire il rilevamento del tocco in JS, portando a una mancata corrispondenza in cui il layout era per desktop, ma JS era per cellulari. In questi giorni mi appoggio al passaggio del mouse e al puntatore per garantire la parità e gestire ipad Pro o le superfici di Windows (che possono cambiare il tipo di puntatore a seconda che la cover sia abbassata o meno)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Quindi sposerò le mie query di layout CSS e le mie query JavaScript, quindi considero il dispositivo di input come fattore principale supportato per larghezza, piuttosto che il contrario.
Suggerimenti ScrollTrigger
Se stai usando GSAP Plugin ScrollTrigger, c'è una piccola utility a cui puoi collegarti per discernere facilmente le capacità touch del dispositivo: ScrollTrigger.isTouch.
0- non toccare (solo puntatore/mouse)1- solo tocco dispositivo (come un telefono)2– il dispositivo può accettare toccare input e puntatore del mouse (come i tablet Windows)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Un altro suggerimento per l'animazione reattiva attivata dallo scorrimento...
La seguente demo di seguito sposta una galleria di immagini orizzontalmente, ma la larghezza cambia a seconda delle dimensioni dello schermo. Se ridimensioni lo schermo quando sei a metà di un'animazione cancellata, puoi ritrovarti con animazioni interrotte e valori non aggiornati. Questo è uno speedbump comune, ma facilmente risolvibile! Inserisci il calcolo che dipende dalle dimensioni dello schermo in un valore funzionale e imposta invalidateOnRefresh:true. In questo modo, ScrollTrigger ricalcolerà quel valore per te quando il browser si ridimensiona.
Suggerimento nerd bonus GSAP!
Sui dispositivi mobili, la barra degli indirizzi del browser di solito viene mostrata e nascosta mentre scorri. Questo conta come un evento di ridimensionamento e si attiverà a ScrollTrigger.refresh(). Questo potrebbe non essere l'ideale in quanto può causare salti nell'animazione. GSAP 3.10 aggiunto ignoreMobileResize. Non influisce sul comportamento della barra del browser, ma impedisce ScrollTrigger.refresh() dal tiro per piccoli ridimensionamenti verticali su dispositivi solo touch.
ScrollTrigger.config({
ignoreMobileResize: true
});Principi di movimento
Ho pensato di lasciarti alcune best practice da considerare quando si lavora con il movimento sul web.
Distanza e facilità
Una cosa piccola ma importante che è facile dimenticare con l'animazione reattiva è la relazione tra velocità, slancio e distanza! Buona animazione dovrebbe imitare il mondo reale per sentirsi credibili, e ci vuole più tempo nel mondo reale per coprire una distanza maggiore. Presta attenzione alla distanza percorsa dalla tua animazione e assicurati che la durata e l'allentamento utilizzati abbiano senso nel contesto di altre animazioni.
Spesso puoi anche applicare un allentamento più drammatico agli elementi con ulteriore viaggio per mostrare l'aumento dello slancio:
Per alcuni casi d'uso può essere utile regolare la durata in modo più dinamico in base alla larghezza dello schermo. In questa prossima demo di cui ci avvarremo gsap.utils per bloccare il valore che otteniamo dalla corrente window.innerWidth in un intervallo ragionevole, quindi stiamo mappando quel numero su una durata.
Spaziatura e quantità
Un'altra cosa da tenere a mente è la spaziatura e la quantità di elementi a diverse dimensioni dello schermo. Citando Steven Shaw:
Se hai qualche tipo di animazione ambientale (parallasse, nuvole, alberi, coriandoli, decorazioni, ecc.) che sono distanziate intorno alla finestra, assicurati che ridimensionino e/o regolino la quantità in base alle dimensioni dello schermo. I grandi schermi probabilmente hanno bisogno di più elementi sparsi ovunque, mentre i piccoli schermi ne necessitano solo alcuni per lo stesso effetto.
Amo come Ofer Vishnia pensa all'animazione come a un palcoscenico. L'aggiunta e la rimozione di elementi non deve essere solo una formalità, può far parte della coreografia generale.
Quando si progettano animazioni reattive, la sfida non è come stipare lo stesso contenuto nel viewport in modo che "si adatti", ma piuttosto come curare l'insieme di contenuti esistenti in modo che comunichi la stessa intenzione. Ciò significa fare una scelta consapevole di quali contenuti aggiungere e quali rimuovere. Di solito nel mondo dell'animazione le cose non entrano o escono dall'inquadratura. Ha senso pensare agli elementi come entrare o uscire dal "palcoscenico", animando quella transizione in un modo che abbia un senso visivo e tematico.
E questo è tutto. Se hai suggerimenti per l'animazione più reattiva, inseriscili nella sezione commenti. Se c'è qualcosa di super utile, lo aggiungerò a questo compendio di informazioni!
appendice
Un'altra nota da Tom Miller mentre stavo preparando questo articolo:
Probabilmente sono troppo in ritardo con questo suggerimento per il tuo articolo sulle animazioni reattive, ma consiglio vivamente di "finalizzare tutte le animazioni prima di creare". Attualmente sto adattando alcune animazioni del sito con "versioni mobili". Grazie al cielo per
gsap.matchMedia... ma di certo avremmo voluto sapere che ci sarebbero stati layout/animazioni mobili separati fin dall'inizio.
Penso che tutti apprezziamo che questo suggerimento per "pianificare in anticipo" sia arrivato all'ultimo minuto assoluto. Grazie, Tom, e buona fortuna con quei retrofit.
