Alla fine dell'anno scorso ho creato il sito Chrome Dev Summit. Volevo che avesse un aspetto simile a quello di Material Design, dato che è un ottimo linguaggio di design, e mi è sembrato che sarebbe perfetto per il tipo di sito che volevo creare. Ma, come per ogni nuovo linguaggio di progettazione, ci sono domande, sfide e decisioni da prendere, e soprattutto quando ci si occupa delle convenzioni del web.
Un aspetto del sito particolarmente difficile da creare era l'effetto "takeover" quando fai clic su una scheda.
Ottenere un effetto come questo a 60 FPS ha richiesto alcune riflessioni, una prototipazione e alcuni compromissioni interessanti. Al Chrome Dev Summit ho parlato di questo effetto e ho spiegato in modo cruento come l'ho realizzato.
Creazione di un'animazione ad alte prestazioni
Le animazioni ad alte prestazioni, almeno oggi, sono quelle che preferiscono il compositore del browser. Se sei in grado di attenerti alla modifica delle proprietà di trasformazione e opacità, in genere ottieni ottime prestazioni. L'approccio generale che ho adottato per l'animazione delle schede è questo:
- Misura la posizione di tutti gli elementi nella scheda quando è compressa.
- Attiva/disattiva i corsi della scheda per espanderla (senza animarla).
- Ora che la scheda è espansa, misura di nuovo la posizione degli elementi nella scheda.
- Calcola le differenze.
- Applica trasformazioni negative per riportare gli elementi nelle posizioni iniziali.
- Attiva le animazioni.
- Rimuovi le trasformazioni negative e osserva gli elementi sfrecciare fino alla loro posizione finale sullo schermo.
Tutto questo potrebbe sembrare costoso, ma esiste una finestra di 100 ms dal momento in cui un utente interagisce prima dell'avvio dell'animazione. Se è superiore a questo valore, l'utente percepisce un ritardo. Puoi sfruttare questo tempo per svolgere costosi lavori preparatori, in modo da risparmiare denaro durante l'animazione stessa. Alla fine c'è anche una finestra di circa 50-100 ms per fare il riordino, che può essere utile a seconda di ciò che stai cercando di fare.
Il costoso lavoro necessario per realizzare l'animazione viene svolto all'interno dei primi 100 ms e, su un Nexus 5, il lavoro richiede nell'arco di 70 ms, quindi c'è abbastanza spazio.
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 e dai un'occhiata.