Alla fine dell'anno scorso ho creato il sito del Chrome Dev Summit. Volevo che avesse l'aspetto e la funzionalità di Material Design, perché è un ottimo linguaggio di progettazione e mi sembrava perfetto per il tipo di sito che volevo creare. Tuttavia, come per qualsiasi nuovo linguaggio di progettazione, ci sono domande, sfide e decisioni da prendere, soprattutto quando si ha a che fare con le convenzioni del web.
Un aspetto del sito particolarmente difficile da creare è stato l'effetto "takeover" quando si fa clic su una scheda.
Per ottenere un effetto di questo tipo a 60 fps sono stati necessari un po' di riflessione, prototipazione e alcuni compromessi interessanti. Al Chrome Dev Summit ho parlato di questo effetto e ho spiegato in modo dettagliato come l'ho creato.
Creare un'animazione ad alto rendimento
Le animazioni ad alte prestazioni, almeno oggi, sono quelle che favoriscono il compositore del browser. Se riesci a limitarti a modificare le proprietà di trasformazione e opacità, in genere otterrai un ottimo rendimento. L'approccio generale che ho adottato per l'animazione della scheda fa proprio questo:
- Misura la posizione di tutti gli elementi nella scheda quando è compressa.
- Attiva/disattiva le classi della scheda per espanderla (senza animazione).
- Misura di nuovo la posizione degli elementi nella scheda ora che è espansa.
- Calcola le differenze.
- Applica trasformazioni negative per riportare gli elementi nelle posizioni iniziali.
- Attiva le animazioni.
- Rimuovi le trasformazioni negative e guarda gli elementi che si spostano nelle loro posizioni finali sullo schermo.
Tutto questo potrebbe sembrare costoso, ma c'è una finestra di 100 ms dal momento in cui un utente interagisce prima che l'animazione debba iniziare. Se il valore è superiore, l'utente percepirà un ritardo. Puoi utilizzare questo tempo per eseguire costosi lavori preparatori in modo da poter lavorare a costi inferiori durante l'animazione stessa. C'è anche una finestra alla fine di circa 50-100 ms per eseguire operazioni di pulizia, che può essere utile a seconda di ciò che stai cercando di fare.
Il lavoro costoso per eseguire l'animazione viene svolto nei primi 100 ms e, su Nexus 5, il lavoro richiede circa 70 ms, quindi c'è spazio a sufficienza.
Ottieni il codice
Se ti interessa esaminare il sito in modo più dettagliato, ti farà piacere sapere che il codice è stato rilasciato su GitHub, quindi vai a dare un'occhiata.