1 of 22

ANIMAZIONI PER IL WEB A 60FPS

di Alessandro Menduni

1

2 of 22

2

3 of 22

ANIMAZIONI PER IL WEB A 60FPS

3

4 of 22

Molte proprietà CSS obbligano il browser a svolgere costose operazioni di calcolo ogni volta che il loro valore cambia; perciò, eseguire una transizione di queste proprietà nel tempo fa sì che queste "costose operazioni di calcolo" vengano svolte tante volte al secondo, e l'animazione corrispondente risulterà "legnosa".

4

5 of 22

Molte proprietà CSS obbligano il browser a svolgere costose operazioni di calcolo ogni volta che il loro valore cambia; perciò, eseguire una transizione di queste proprietà nel tempo fa sì che queste "costose operazioni di calcolo" vengano svolte tante volte al secondo, e l'animazione corrispondente risulterà "legnosa".

5

6 of 22

Molte proprietà CSS obbligano il browser a svolgere costose operazioni di calcolo ogni volta che il loro valore cambia; perciò, eseguire una transizione di queste proprietà nel tempo fa sì che queste "costose operazioni di calcolo" vengano svolte tante volte al secondo, e l'animazione corrispondente risulterà "legnosa".

6

7 of 22

Molte proprietà CSS obbligano il browser a svolgere costose operazioni di calcolo ogni volta che il loro valore cambia; perciò, eseguire una transizione di queste proprietà nel tempo fa sì che queste "costose operazioni di calcolo" vengano svolte tante volte al secondo, e l'animazione corrispondente risulterà "legnosa".

7

8 of 22

OPERAZIONI DI CALCOLO

=

CATTIVE PERFORMANCE

??

8

9 of 22

La lag di un'animazione è la manifestazione visiva di quando il renderer "salta" un frame

9

10 of 22

Un frame rimane a schermo troppo a lungo

se il frame che segue non è pronto

10

11 of 22

11

Figura vergognosamente rubata da questo articolo di Google Developers, che consiglio di leggere. bit.ly/2w0CuY7

12 of 22

12

13 of 22

13

https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

14 of 22

Due vittorie:

​

  1. La GPU è più efficiente della CPU per questo tipo di lavori
  2. La GPU e la CPU possono lavorare in parallelo

14

15 of 22

VA BENE, VA BENE.. E ORA?

15

16 of 22

RISPOSTA LUNGA:

CSSTRIGGERS.COM

16

17 of 22

RISPOSTA BREVE:

TRANSFORM E OPACITY

17

18 of 22

FERMI! DUE AVVERTENZE:

  1. WILL-CHANGE: TRANSFORM
  2. OGNI LIVELLO HA UN COSTO

18

19 of 22

FERMI! DUE AVVERTENZE:

  1. WILL-CHANGE: TRANSFORM
  2. OGNI LIVELLO HA UN COSTO

19

20 of 22

FERMI! DUE AVVERTENZE:

  • WILL-CHANGE: TRANSFORM
  • OGNI LIVELLO HA UN COSTO

20

21 of 22

21

22 of 22

GRAZIE DELL’ATTENZIONE!

22