¿Animar el valor de una transformación CSS3 con javascript no permite la aceleración de hardware?

Puede aprovechar las animaciones aceleradas por hardware estableciendo una duración de animación y estableciendo los valores inicial y final de la transformación CSS3.¿Animar el valor de una transformación CSS3 con javascript no permite la aceleración de hardware?

¿Qué sucede si, en lugar de establecer una duración de animación y utilizar fotogramas clave, usted anima el valor de la transformación CSS3 deseada directamente con JavaScript? ¿Seguirás aprovechando la aceleración del hardware o se descarta la aceleración del hardware?

Fuente

2012-01-09 trusktr

Análisis sobre por qué jQuery es más lento que CSS: http://css3.bradshawenterprises.com/demos/speed.php. ¡La versión de jQuery ni siquiera se anima en mi CPU de doble núcleo cuando hay demasiados bloques! – JoJo

Es es hardware acelerado, pero como Rich menciona, es más fácil y más eficiente hacerlo con transiciones CSS. Lo que pasa es que la animación de las transformaciones 3D con jQuery no es sencilla, si lo hace:

$('div').animate({ 
    '-vendor-transform' : "translate3d(100px,0,0)"; 
}, 500)

No funciona. Incluso si lo hace:

$('div').css("-webkit-transform", "translate3d(0,0,0)"); 
alert($('div').css("-webkit-transform"))

No vuelvas translate3d(0,0,0), se obtiene matrix(1, 0, 0, 1, 100, 0)

Por lo que debe escribir un montón de código animación personalizada que implica matrices sólo para obtener las cosas en movimiento en la pantalla.

Aquí hay un ejemplo de transformación 3D animada personalizada: http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/, eche un vistazo al código fuente para ver si es el nivel de javascript con el que se siente cómodo.

Fuente

2012-01-09 16:40:12 Duopixel

¡Guau! Entonces, los valores de '-webkit-transform: rotate3D (...)' están animados con javascript, pero todo se acelera con la GPU? ¿Qué pasa con propiedades como 'top' o' left'? Tengo la impresión de que si animas esas propiedades con javascript, no se acelerará la GPU a menos que apliques 'transform: translate3d (0,0,0)' para activar la aceleración de la GPU. ¿Está bien? – trusktr

No, incluso si aplica 'translate3d' y luego anima' left 'con jquery, la gpu no entrará en acción. Aquí hay algunos casos de prueba: http://jsfiddle.net/zAgpd/, la diferencia es más evidente en Safari. – Duopixel

Para ser honesto, no puedo notar ninguna diferencia en el rendimiento en mi computadora. Todos parecen funcionar igual de uniformemente suave. Entonces, solo para verificar, tanto '# jqhardware' como' # hardware' son acelerados por hardware. – trusktr

No se acelerará el hardware para navegadores webkit a menos que use transiciones. Además, sólo se transforma 3d se aceleran, por lo que una forma rápida de asegurarse de que el elemento se va a utilizar el árbol de representación 3D si está disponible es añadir:

-webkit-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);

La razón transformadas son rápidos, por cierto, es porque por definición, no afectan a ningún otro elemento, esto significa que el navegador no necesita repintar toda la ventana, solo la parte que se está transformando.

La antigua forma de animar realmente debería considerarse obsoleta, ya que es mucho menos eficiente que las transiciones, y generalmente tiene una tasa de fotogramas más baja, especialmente en iOS.

Fuente

2012-01-09 09:57:42

Entonces, por ejemplo, la transformación oblicua no será acelerada sin usar ese truco 'transform3d: translate (0,0,0);'? – trusktr

No estoy seguro de sesgo - Solo he usado traducir en uso de producción. Supongo que sí, pero podría estar equivocado. –

Rich significa 'transform: translate3d (0,0,0)'. – Duopixel

¿Animar el valor de una transformación CSS3 con javascript no permite la aceleración de hardware?

Respuesta

Cuestiones relacionadas