Transiciones de CSS, las animaciones tienen un rendimiento terrible, comportamiento

I'm working on a page turn animation. El rendimiento es decepcionante. Particularmente si toma la clase pages y la convierte en algo así como 800px de ancho (pegue $('.pages').css({width: '960px', height: '600px'}); en su consola). Solía tener alrededor de 16 transiciones funcionando a la vez y la reduje a 9, ¡muchas de las cuales son transformadas! No sé qué más puedo hacer.Transiciones de CSS, las animaciones tienen un rendimiento terrible, comportamiento

Parece que Chrome no está utilizando la GPU. Se clava el FPS en la página giro inicial pero luego sumerge abajo a intervalos regulares (habilitados esto con about:flags):

Chrome showing FPS dips

¡Pruébalo en Safari y obtendrá un mejor rendimiento, pero ver que las animaciones no se sincronizan arriba, a menudo detrás de la otra, y hay una extraña inestabilidad que Román Cortés's project also suffered from en el mismo navegador (aún no lo he hecho funcionar en Fx).

No ha habido mucho material bueno acerca de cómo optimizar las transiciones y animaciones de CSS en la web y he estado enseñándome principalmente a mí mismo. Esperaba que alguien tuviera este tipo de consejos.

Fuente

2011-12-13 Caleb Hearon

Aquí está a page flip I did para nuestro lanzamiento de Sencha Animator. También está inspirado en el original de Ramón Cortés, pero utiliza diferentes mecanismos, por lo que recuerdo. Es súper suave en Safari y en iOS, pero es un poco irregular en el escritorio de Chrome. Aunque todavía no lo he comprobado en Android 4.

Fuente

2011-12-13 19:23:21

Bien, tendré que estudiar esta técnica ya que a Safari parece gustarle mejor. Sin embargo, Chrome en Mac lo renderiza con trozos de píxeles aleatorios que se vuelven negros o revela la capa subyacente al azar. –

Sí, al parecer, la versión webkit de Chrome 15 (?) Tiene un error donde los z-orders implícitos se confunden cuando se agregan las transformaciones. Voy a abordar una versión con una configuración explícita de z-index y ver si soluciona las cosas. –

Acabo de descubrir que si agrega '-webkit-transform-style: preserve-3d' no parpadea así. Todavía tengo un recorte donde no debería. –

Para aprovechar la GPU, tiene que usar translate3d(x,y,z) en lugar de translate(x,y) en su -webkit-tranform. Esto obligará a Chrome a usar la GPU para procesar las animaciones.

Tenga en cuenta que si bien el rendimiento aumentará en gran medida si la computadora tiene una buena tarjeta de video, también se degradará en un hardware más lento.

Fuente

2011-12-13 21:46:49

Gracias, probé translate3d en Chrome/MacOS y fue tremendamente lento cuando tenía 12 páginas de estructuras DOM algo complicadas. ¡Toda la página se ralentizó antes de que animara algo! Desafortunadamente, no puedo encontrar una manera de evitar que paralice una plataforma mientras acelera otra. –

Estoy usando Chrome 17 en OSX, y parece estar bien: se ejecuta a alrededor de 20-30 fps, sin problemas de inmersión o gráficos. Sospecho que esto es solo un problema con versiones anteriores de Chrome.

Fuente

2011-12-13 22:08:06

La última versión beta tiene enormes ganancias de rendimiento. Gracias. –

Animar sombras de recuadro y -webkit-gradients es muy caro, intente eliminarlos temporalmente para ver si mejora el rendimiento. Si lo hace, vea lo que puede hacer para reemplazarlos con imágenes.

Fuente

2011-12-14 17:36:00 Duopixel

Transiciones de CSS, las animaciones tienen un rendimiento terrible, comportamiento

Respuesta

Cuestiones relacionadas