Alla fine dell'anno scorso ho creato il sito Chrome Dev Summit. Volevo che avesse un aspetto e uno stile di material design, poiché è un linguaggio di design eccezionale e mi è sembrato che sarebbe stato 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 si affrontano le convenzioni del web.
Un aspetto del sito particolarmente difficile da creare era l'effetto "takeover" che veniva fatto clic su una scheda.
Ottenere un effetto come questo a 60 fps richiede alcune riflessioni, la prototipazione e alcuni compromessi interessanti. Al Chrome Dev Summit ho parlato di questo effetto e 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 prediligono il compositore del browser. Se sei in grado di attenerti alla modifica delle proprietà di trasformazione e opacità, in genere registri un rendimento elevato. L'approccio generale che ho adottato per l'animazione delle schede è proprio questo:
- Misura la posizione di tutti gli elementi al suo interno quando è compressa.
- Attiva/disattiva i corsi della scheda per espanderla (senza animarla).
- Misura nuovamente la posizione degli elementi nella scheda ora che è espansa.
- Calcola le differenze.
- Applica trasformazioni negative per spostare gli elementi nelle posizioni iniziali.
- Attiva le animazioni.
- Rimuovi le trasformazioni negative e osserva gli elementi che si spostano nella loro posizione finale sullo schermo.
Tutto questo potrebbe sembrare costoso, ma c'è una finestra di 100 ms dal momento in cui un utente interagisce prima dell'inizio dell'animazione. Se non è così, l'utente percepisce un ritardo. Puoi sfruttare questo tempo per realizzare costosi lavori preparatori in modo da essere più economico durante l'animazione stessa. Alla fine di circa 50-100 ms c'è anche una finestra per fare il riordino, che può essere utile a seconda di ciò che stai cercando di fare.
Il costoso lavoro 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'è spazio di riserva.
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.