Ciao, e benvenuto nella settima puntata della settantasettesima stagione. La volta scorsa, la ricetta: la lista ordinata di istruzioni di disegno. Oggi l'ultimo passo prima dello schermo, e il trucco più ingegnoso di tutto il motore: come muovere le cose senza rifare nessun lavoro. Il titolo: i pezzi su rotelle.
Prima, rendere in pixel veri. La ricetta è ancora istruzioni, non pixel. Per mostrarla, qualcuno deve eseguirla davvero: riempire i colori, disegnare il testo, dipingere il fondale, producendo pixel veri. Questo è il passaggio che trasforma disegna un rettangolo blu qui nella griglia di pixel blu. I pittori dipingono finalmente i pannelli fisici. E spesso lo fanno a quadrati, a piastrelle, così da ridipingere solo i quadrati che cambiano, non tutto il fondale.
E adesso la parte ingegnosa: i pezzi a sé. Invece di dipingere tutto su un unico, enorme fondale, il motore può dipingere certe cose su pezzi separati, pannelli già dipinti montati su rotelle. Un menu, un elemento che si anima, un video: ognuno sulla sua rotella. Poi, per mostrare la scena finale, una squadra separata fa semplicemente scorrere i pannelli al loro posto e li sovrappone. Questo sovrapporre pezzi già dipinti è il comporre.
Ed è qui tutto il gioco: muovere senza ridipingere. Se una cosa sta su un pannello a sé, muoverla, sfumarla, ingrandirla costa quasi niente: non la ridipingi, fai solo scorrere il pannello già dipinto in un punto nuovo, o abbassi la luce su di esso. Niente rimessa in scena, niente ridipinta: solo riposizionare un pezzo finito. È per questo che due animazioni identiche a occhio possono costare mondi diversi. Animare la posizione di una scatola cambiando le sue coordinate di disposizione costringe a rimettere in scena e ridipingere a ogni fotogramma: sposti l'attore, rifai la posizione, ripitturi. Animarla con una trasformazione fa solo scorrere la sua rotella. Lo stesso movimento sullo schermo: uno rifà quasi tutta la catena a ogni fotogramma, l'altro la sfiora appena. Il livello più economico del nostro filo abita qui: un cambiamento di solo comporre.
E c'è un regalo più profondo: la seconda squadra. Far scorrere i pannelli può avvenire su una squadra separata, un secondo thread, diversa da quella che legge il tuo copione e rimette in scena. Così, anche se la squadra principale è occupata, il tuo codice sta girando, oppure è in corso una rimessa in scena, gli addetti alle rotelle possono continuare a presentare fotogrammi fluidi per tutto ciò che si sta soltanto muovendo. È per questo che un'animazione fatta bene resta liscia anche mentre la pagina è impegnata: gira sulla seconda squadra, fuori dalla via principale. Ed è per questo che la trasformazione e la sfumatura sono le proprietà benedette: possono essere gestite tutte dalla seconda squadra.
Ma le rotelle non sono gratis, ed ecco il costo onesto. Ogni pannello già dipinto occupa memoria: è un quadro conservato, a volte sulla scheda grafica. E ogni pannello va comunque dipinto una prima volta, e tenuto aggiornato se il suo contenuto cambia. Promuovi a rotelle poche cose e l'animazione vola; promuovine centinaia e affoghi nella memoria, e il motore passa il tempo a gestire pannelli invece di mostrare la scena. Questo è lo scoppio dei pannelli, e a volte lo provochi senza accorgertene, perché certe proprietà promuovono un elemento a pannello di nascosto. Quindi mettere una cosa su un pannello è uno strumento di precisione, non una cura per tutto: una manciata di pannelli decisi apposta per ciò che davvero si muove, non un pannello su ogni cosa.
E ora si vede tutta la scala. Un cambiamento può rientrare nella catena allo stile, alla disposizione, cioè la cara rimessa in scena, al dipingere, il livello di mezzo, oppure solo al comporre, il livello economico: fai scorrere un pannello, niente rimesso in scena, niente ridipinto. Quattro altezze, prezzi lontanissimi, stessa catena. L'arte delle prestazioni fluide sul web è spingere le tue modifiche più in basso possibile, idealmente fino al solo comporre.
Voglio lasciarti con il trucco più potente del motore, e il suo limite. Il trucco: le cose su un pezzo a sé si possono muovere, sfumare, ingrandire senza ridipingere e senza rimettere in scena, solo facendo scorrere un pezzo già pronto, e per di più da una seconda squadra che lavora in parallelo. È per questo che animare con una trasformazione è fluido e animare spostando la posizione no, anche se a occhio sono identici. Il limite: ogni pezzo a sé costa memoria, quindi è uno strumento di precisione, non una cura universale. Metti sulle rotelle le poche cose che davvero si muovono, e lascia tutto il resto dipinto sul fondale.
Per oggi ci fermiamo qui. Abbiamo visto rendere la ricetta in pixel veri, a piastrelle; i pezzi su rotelle che si compongono sovrapponendosi; il trucco per cui muovere un pannello già dipinto salta sia la disposizione sia la ridipinta; la seconda squadra che tiene fluide le animazioni anche a pagina occupata; e il costo, lo scoppio dei pannelli, che rende i pannelli uno strumento di precisione. Nella prossima puntata: il ritmo dei fotogrammi. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.