Le transizioni CSS, le animazioni hanno prestazioni terribili, comportamento

I'm working on a page turn animation. La performance è deludente. Soprattutto se si prende la classe pages e si ottiene qualcosa come 800px wide (incollare $('.pages').css({width: '960px', height: '600px'}); nella console). Avevo circa 16 transizioni in esecuzione contemporaneamente e le ho ridotte a 9, molte delle quali sono trasformate! Non so cos'altro posso fare.Le transizioni CSS, le animazioni hanno prestazioni terribili, comportamento

Chrome non sembra utilizzare la GPU. E 'picchi del FPS a pagina turno iniziale, ma poi scende giù a intervalli regolari (abilitati questo con about:flags):

Chrome showing FPS dips

Prova ora in Safari e si ottengono prestazioni migliori, ma vedere che le animazioni non vengono sincronizzati in alto, spesso in ritardo tra loro, e c'è una bizzarra stranezza nello Román Cortés's project also suffered from nello stesso browser (non l'ho ancora fatto funzionare in Fx).

Non c'è stato molto materiale su come ottimizzare le transizioni CSS e le animazioni sul web e mi sono insegnato principalmente. Speravo che qualcuno avrebbe avuto questo tipo di consiglio.

fonte

2011-12-13 Caleb Hearon

Ecco il a page flip I did per il nostro lancio di Sencha Animator. È anche ispirato all'originale di Ramon Cortes, ma utilizza meccanismi diversi, per quanto mi ricordi. È super fluido in Safari e su iOS, ma è un po 'a scatti sul desktop di Chrome. Non ho ancora controllato su Android 4.

fonte

2011-12-13 19:23:21

Bello, dovrò studiare questa tecnica visto che Safari sembra apprezzarlo meglio. Tuttavia, Chrome su Mac lo rende con blocchi casuali di pixel che diventano neri o che rivelano a caso il livello sottostante. –

Sì, apparentemente la versione del webkit di Chrome 15 (?) Ha un bug in cui gli ordini z impliciti vengono incasinati quando vengono aggiunte le trasformazioni. Ho intenzione di affrontare una versione con impostazioni z-index esplicite e vedere se risolve le cose. –

Ho appena capito se si aggiunge '-webkit-transform-style: preserve-3d' non ha lo sfarfallio del genere. Ho ancora un po 'di clipping dove non dovrebbe però. –

Per sfruttare la GPU è necessario utilizzare translate3d(x,y,z) anziché translate(x,y) nel proprio pacchetto -webkit-tranform. Ciò imporrà a Chrome di utilizzare la GPU per eseguire il rendering delle animazioni.

Attenzione che mentre le prestazioni aumentano notevolmente se il computer ha una buona scheda video, si degraderà anche su un hardware più lento.

fonte

2011-12-13 21:46:49

Grazie, ho provato translate3d su Chrome/MacOS ed è stato tremendamente lento quando avevo 12 pagine di strutture DOM un po 'complicate. L'intera pagina ha rallentato fino a farmi strisciare prima ancora di animare qualsiasi cosa! Quindi, sfortunatamente, non riesco a trovare un modo per convincerlo a non paralizzare una piattaforma mentre ne accelero un'altra. –

Sto usando Chrome 17 su OSX e mi sembra soddisfacente: viene eseguito a circa 20-30 fps, senza problemi di immersione o grafici. Sospetto che questo sia solo un problema con le versioni precedenti di Chrome.

fonte

2011-12-13 22:08:06

L'ultima beta ha davvero enormi guadagni in termini di prestazioni. Grazie. –

L'animazione di ombre di riquadri e gradienti di fumetti è molto costosa, provare a rimuoverli temporaneamente per vedere se migliora le prestazioni. Se lo fa, vedi cosa puoi fare per sostituirli con le immagini.

fonte

2011-12-14 17:36:00 Duopixel

Le transizioni CSS, le animazioni hanno prestazioni terribili, comportamento

risposta

Problemi correlati