TORNA INDIETRO
Una delle cose che ci ha confuso durante la costruzione del nostro nuovo sito web sono state le onde morphed che si possono vedere in diversi punti delle pagine. Avevamo molte idee su come implementarle nel modo giusto senza grandi sforzi. Tuttavia, la maggior parte delle soluzioni era lenta e abbiamo dovuto costruire da zero qualcosa che fosse più veloce delle librerie già esistenti.
Abbiamo iniziato con un semplice oggetto SVG che è stato animato con diverse librerie. Poiché volevamo avere 3 oggetti in una pagina, il risultato non è stato molto soddisfacente. Tutte le animazioni erano lente: tutti i percorsi di un singolo oggetto SVG dovevano essere aggiornati in tempi molto brevi, rendendo l'intera pagina lenta come una lumaca. Abbiamo dovuto scartare la soluzione con SVG puro inserito in un documento. Ci sono rimaste altre due soluzioni tra cui scegliere.
Il video era la seconda opzione. Abbiamo iniziato con due problemi:
- sfondo trasparente, che non può essere applicato ai formati video più diffusi come .mp4 o .webm,
- reattività, che era un vero problema perché i video non sono scalabili in quanto tali.
Abbiamo deciso di tenere questa soluzione in secondo piano: "se non troviamo nient'altro, sceglieremo questa".
L'ultima opzione era quella di utilizzare tela con WebGL rendering. È stata un'opzione insolita, perché abbiamo dovuto progettare da soli tutte le meccaniche di rendering. Questo perché le onde morfiche che avevamo erano personalizzate, il che ci ha costretti a progettare una soluzione su misura.
Partiamo da zero. Qual era il materiale che dovevamo usare per costruire queste onde? L'idea era che tutte le onde fossero un file SVG di dimensioni 1×1 e percorsi specifici posizionati intorno a quest'area. L'animazione di questo SVG è stata costruita con alcune forme di stati su questo file. Quindi, tutte le animazioni erano rappresentate come un insieme di file che contenevano le fasi di spostamento di una forma.
Guardate più a fondo cosa sono gli stati: tutti i percorsi sono solo una sorta di array con valori specifici posizionati in un ordine specifico. La modifica di questi valori in posizioni specifiche all'interno di questo array cambia la forma nelle sue parti specifiche. Possiamo semplificare il tutto con il seguente esempio:
stato 1: [1, 50, 25, 40, 100]
stato 2: [0, 75, -20, 5, 120]
stato 3: [5, 0, -100, 80, 90]
Quindi, possiamo supporre che la forma che vogliamo rendere consista in un array con 5 elementi che cambiano con l'attenuazione lineare in periodi di tempo specifici. Quando l'animazione termina l'ultima fase, riparte dalla prima per dare l'impressione di un'animazione infinita.
Ma... aspettate: cos'è esattamente l'array presentato sopra? Come ho detto, si tratta di un percorso che ha il compito di visualizzare una forma specifica. Tutta la magia è inclusa nell'array d del percorso di SVG. Questa proprietà contiene una serie di "comandi" per disegnare una forma e ogni comando ha una serie di argomenti. L'array di cui sopra consiste in tutti i valori (argomenti) allegati a questi comandi.
L'unica differenza tra questi "file di stato" erano i valori di comandi specifici, poiché l'ordine dei comandi era lo stesso. Quindi, tutta la magia consisteva nell'ottenere tutti i valori e animarli.
Nel paragrafo precedente, ho detto che l'unica magia nell'animazione di un oggetto è la creazione di transizioni tra tutti gli stadi di una forma. La domanda è: come farlo con il canvas?
La funzione che tutti coloro che hanno lavorato con tela dovrebbe sapere è richiediAnimationFrame. Se vedete questa funzione per la prima volta, credo sinceramente che dovreste iniziare a leggere questo. Allora, la cosa che ci interessa di questa funzione è l'argomento - DOMHighResTimeStamp. Sembra davvero terrificante, ma in pratica non è così difficile da capire. Possiamo dire che è un timestamp del tempo trascorso dal primo rendering.
Ok, ma cosa possiamo fare con questo? Poiché il richiediAnimationFrame La funzione deve essere chiamata in modo ricorsivo, possiamo accedere a un delta temporale tra le sue chiamate. Ed eccoci alla scienza! ⚛️ (ok, forse non è scienza missilistica... ancora)
La fisica ci insegna che il delta di una distanza è uguale al delta del tempo moltiplicato per la velocità. Nel nostro caso, la velocità è costante perché vogliamo raggiungere il punto finale in un determinato periodo di tempo. Vediamo quindi come possiamo rappresentarlo con gli stati di cui sopra:
Supponiamo di voler passare da uno stato all'altro in mille millisecondi, quindi i valori di velocità saranno i seguenti:
delta: [ -1, 25, -45, -35, 20]
velocità: [-1/1000, 25/1000, -45/1000, -35/1000, 20/1000]
La velocità di cui sopra ci dice: per ogni millisecondo aumentiamo il valore di -1/1000. E qui è il punto in cui possiamo tornare al nostro richiediAnimationFrame e il tempo delta. Il valore di una posizione specifica che vogliamo aumentare è il tempo delta moltiplicato per la velocità della sua posizione. Un'altra cosa da realizzare senza problemi è limitare il valore in modo da non superare lo stato a cui si sta andando.
Quando la transizione termina, ne chiamiamo un'altra e così via. Non sembra essere così difficile da implementare, ma una delle regole principali di sviluppo software è di non spendere tempo su cose che sono già state implementate. Quindi, abbiamo scelto un piccola biblioteca che ci permette di creare queste transizioni senza sforzo.
Ecco come abbiamo creato un'onda animata che sembra una creatura vivente.
Come si può notare, le onde del marchio The Codest non sono un'unica figura animata. Sono composte da molte figure con la stessa forma ma con dimensioni e posizioni diverse. In questo passo, daremo un'occhiata veloce a come duplicare in questo modo.
Quindi, il contesto del canvas ci permette di area di disegno in scala (sotto il cofano - possiamo dire che moltiplica tutte le dimensioni passate nei metodi di disegno per "k", dove "k" è un fattore di scala, impostato per default a "1"), rendere la tela tradottaè come cambiare il punto di ancoraggio di un'area di disegno. Con questi metodi possiamo anche passare da uno stato all'altro: salvare e ripristino.
Questi metodi ci consentono di salvare lo stato di "zero modifiche" e quindi di eseguire il rendering di un numero specifico di onde nel ciclo con un canvas correttamente scalato e traslato. Subito dopo, possiamo tornare allo stato salvato. Questo è tutto sulla clonazione delle figure. Molto più facile che clonare le pecore, vero?
Ho detto che abbiamo scartato una delle potenziali soluzioni a causa delle prestazioni. L'opzione con il canvas è abbastanza veloce, ma nessuno ha detto che non possa essere ottimizzata ancora di più. Partiamo dal fatto che non ci interessa molto la transizione delle forme quando si trovano al di fuori della finestra del browser.
C'è un'altra API del browser che i programmatori hanno amato - Osservatore dell'intersezione. Ci consente di seguire elementi specifici della pagina e di gestire gli eventi che vengono invocati quando tali elementi appaiono o scompaiono dalla finestra di visualizzazione. In questo momento abbiamo una situazione piuttosto semplice: creiamo lo stato di visibilità, modifichiamolo grazie ai gestori di eventi IntersectionObserver e attiviamo/disattiviamo semplicemente il sistema di rendering per forme specifiche. E... boom, le prestazioni sono molto migliorate! Stiamo eseguendo il rendering delle sole cose visibili nella finestra di visualizzazione.
Scegliere un modo per implementare le cose è spesso una scelta difficile, soprattutto quando le opzioni disponibili sembrano avere vantaggi e svantaggi simili. La chiave per fare una scelta corretta è analizzare ciascuna di esse ed escludere quelle che riteniamo meno vantaggiose. Non tutto è chiaro: alcune soluzioni richiedono più tempo delle altre, ma possono essere ottimizzate più facilmente o più personalizzabili.
Sebbene nuove librerie JS compaiano quasi ogni minuto, ci sono cose che non possono risolvere. Ecco perché ogni ingegnere front-end (e non solo) dovrebbe conoscere le API dei browser, tenersi aggiornato sulle novità tecniche e talvolta pensare "come sarebbe la mia implementazione di questa libreria se dovessi fare questo?". Con una maggiore conoscenza dei browser, possiamo costruire cose davvero fantasiose, prendere buone decisioni sugli strumenti che utilizziamo e diventare più fiduciosi nei confronti delle nostre codice.
Per saperne di più:
– Ruby 3.0. Ruby e i metodi di controllo della privacy meno conosciuti
– Zitto e prendi i tuoi soldi #1: Costi nascosti e reale agilità nel processo di sviluppo del prodotto
– CTO sfide - scalabilità e crescita dei prodotti software
Italian 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Arabic 
Japanese 
Korean 
Polish