Liquid Glass, misurato

Il numero che mi ha fermato è stato 120. Hitch al minuto, con Instruments aperto e dieci schede di vetro sullo schermo con l'animazione del riflesso attiva. Consideravo la risposta all'inclinazione praticamente gratuita: sembrava giusta, seguiva la luce come farebbe il vetro vero, mi pareva il dettaglio giusto. Poi l'ho misurata.

Passare a un riflesso statico su quindici schede ha portato il numero a cinque. Più schede, nessun movimento: un elenco più pieno e 115 hitch in meno al minuto. Il vetro è rimasto. L'animazione no.

Quel divario è il senso di questo articolo.

Cosa ho escluso per prima cosa

L'ipotesi ovvia era il numero di schede. Più superfici sullo schermo, più lavoro: è una logica che regge per molti problemi di rendering, e l'ho inseguita più a lungo del dovuto. Cosa ho provato davvero: scendere da 60 Hz a 30. Spostare il riflesso dal rendering SwiftUI a un CALayer. Il motion gating, con l'animazione che parte solo quando l'accelerometro dice che il dispositivo è fermo. Limitare la scheda più alta perché non possa superare un'altezza fissa. Niente di tutto questo ha spostato i numeri in modo significativo.

La correzione che ha funzionato era anche la più semplice: motionEnabled = false. Riflesso statico, nessuna risposta all'inclinazione, nessun campionamento a ogni frame.

Cosa fa davvero il sistema

.glassEffect funziona campionando ciò che ha dietro. È questo che lo fa sembrare vetro e non un rettangolo smerigliato: legge cosa c'è dietro e applica sfocatura, tinta e riflesso speculare su quel campione. Il campione è dal vivo. Quando qualcosa si muove sopra una superficie di vetro, il sistema deve ricomporre lo sfondo per ogni superficie di vetro sullo schermo, non solo per quella più vicina al movimento.

Dieci schede. Sessanta frame al secondo. Un'animazione del riflesso che scorre sopra di esse. Sessanta ricomposizioni per superficie al secondo, moltiplicate per ogni scheda di vetro nella gerarchia delle viste. 120 hitch al minuto.

Quindici schede con riflesso statico: lo sfondo viene campionato una volta e mantenuto finché qualcosa non cambia. Cinque hitch al minuto.

Il bordo speculare esiste ancora nella versione pubblicata. È illuminato da un'angolazione fissa e non si muove mai. Quello che è dovuto sparire è la risposta all'inclinazione, la parte che seguiva l'orientamento del dispositivo e faceva spostare il riflesso mentre muovevi il telefono. La scheda sembra ancora vetro. Solo che non risponde alla gravità.

Il vero fattore di costo è l'area

Una volta chiaro il modello di ricomposizione, ne è seguita un'altra conseguenza: il costo cresce con l'area dello sfondo, non con il numero di superfici di vetro.

Trentacinque schede strette costano meno di dieci schede alte. Quello che il sistema compone è l'area totale dello schermo coperta dal vetro, e una scheda piccola contribuisce proporzionalmente meno di una grande, a prescindere da quante ce ne siano. Una scheda di statistiche in cima a un elenco, piccola e ad altezza fissa, costa poco. Una scheda che occupa quasi tutta la larghezza dello schermo e cresce con il contenuto costa molto.

Questo cambia la domanda di design. Non è «quante superfici di vetro posso permettermi in questa schermata?». È «quanta parte del viewport è vetro a un dato punto di scorrimento?».

Il problema delle schede alte

Alcune schede devono essere alte. La scheda degli appuntamenti, per esempio, poteva crescere senza limiti man mano che si aggiungevano elementi. Senza vincoli, la sua area di sfondo cresce con lei, e così il costo per frame.

La soluzione è limitarne l'altezza. Dai alla scheda un'altezza massima e lascia che il contenuto scorra al suo interno. Il sistema del vetro vede per quella superficie una costante grande quanto un riquadro, indipendentemente da quante righe ci siano dentro. La scheda è sostenibile perché la sua area di sfondo è limitata.

È uno di quei vincoli che migliorano anche il design, a prescindere dalle prestazioni. Una scheda che cresce senza limiti tende comunque a spingere tutto il resto fuori dallo schermo.

Due dettagli di implementazione da conoscere

GlassEffectContainer raggruppa le superfici di vetro sorelle in un unico passaggio di composizione. Se hai diversi elementi di vetro allo stesso livello della gerarchia (una fila di schede di statistiche, una griglia), vale la pena racchiuderli nel contenitore. Senza, ogni superficie viene composta separatamente.

L'altro dettaglio: .clipShape deve venire prima di .background nella catena dei modificatori.

// Wrong — the background bleeds past the corners
.background(material)
.clipShape(RoundedRectangle(cornerRadius: 16))

// Right
.clipShape(RoundedRectangle(cornerRadius: 16))
.background(material)

Il materiale del vetro non ritaglia i suoi figli. Una riga che disegna il proprio sfondo disegnerà angoli squadrati oltre la forma arrotondata della scheda se il ritaglio viene dopo. L'ho scoperto a mie spese su un elenco con righe interne.

Cosa è costato al design

La risposta all'inclinazione non c'è più. Era il comportamento più evidentemente da vetro, il riflesso che si spostava mentre muovevi il telefono, ed è ciò a cui rinunci quando il profiler dice 120.

Cosa è rimasto: il corpo smerigliato, il bordo speculare, il gradiente angolare per il riflesso. La scheda sembra vetro. Non si comporta come il vetro in senso fisico.

L'altro vincolo imposto dalle misurazioni: le schede di statistiche restano di vetro trasparente, mai colorate. Una tinta che funziona su una scheda con etichette bianche rende invisibile il testo nel colore primario. La codifica a colori appartiene ai dati (la sparkline, l'indicatore), non alla superficie.

Il file è la documentazione

LiquidGlassCard.swift è copiato identico in The Smart Dentist, Billing e Coach. Di proposito. Le regole sulle prestazioni viaggiano con il file invece di vivere in una nota da qualche parte. Il contesto del passaggio da 120 a 5 sta nello stesso sorgente del codice, accanto alle manopole e ai commenti, così chi lo apre dopo non deve riscoprire niente di tutto questo.

I numeri sono il documento di design. Tutto il resto è un commento.