He estado haciendo proyectos que han requerido transiciones y animaciones suaves. Recientemente, hemos migrado de usar Javascript a animaciones CSS casi el 100% del tiempo.

He descubierto que el uso de translate3d proporciona una animación agradable y fluida tanto en dispositivos móviles como en computadoras de escritorio.

Mi estilo de animación actual es así:

CSS:

.animation-up{
     transform: translate3d(0, -100%, 0);
 }

.animation-down{
     transform: translate3d(0, 100%, 0);
 }

.animation-left{
     tranform: translate3d(-100%, 0, 0);
 }

.animation-right{
     tranform: translate3d(-100%, 0, 0);
 }

Recientemente, comencé a buscar en diferentes marcos que parecen estar recibiendo mucha atención. Dos en GreenSock específico (http://greensock.com/tweenmax) y Famo.us (http://famo.us). Ambos muestran velocidades de cuadro impresionantes y un rendimiento asombroso.

Me doy cuenta de que están usando una transformación matricial.

Ejemplo de Greensock (usando matriz):

<div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"></div>

Ejemplo de Famo.us (usando 3D-matrix):

<div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"></div>

Mi pregunta es ... ¿Cuál es la diferencia entre translate3d y matrix? ¿Existe una gran mejora al usar matrix sobre translate3D? ¿Existe otro método que produzca mejores resultados?

Estoy contento con translate3D, pero quiero aprender cualquier método que brinde las mejores animaciones más fluidas y busco orientación sobre lo que tal vez.

6
w3bMak3r 6 feb. 2015 a las 03:12

3 respuestas

La mejor respuesta

Nit es correcto: en la mayoría de los escenarios del mundo real, el rendimiento sería indistinguible entre translate3d () y matrix3d ​​(). En última instancia, todas las transformaciones se convierten en una matriz en algún nivel porque así es como la GPU representa las cosas (al menos eso es lo que entiendo).

Una matriz () y una matriz3d () contienen no solo datos posicionales, sino también rotación, escala y sesgo.

Preguntó si hay una diferencia de rendimiento entre matrix () y matrix3d ​​() y la respuesta es "a veces". matrix3d ​​() (o cualquier transformación relacionada con 3D) generalmente obliga al navegador a "estratificar" ese elemento (piense en ello como tomar una foto de sus píxeles y almacenarlos en la GPU) que luego es más rápido de manipular ya que sus píxeles están separados del resto de las / capas de la pantalla '. Por lo general, verá animaciones más suaves con esta técnica. Sin embargo, hay un pequeño costo para superponer algo inicialmente (trasladar los píxeles a la GPU).

El otro lado negativo de matrix3d ​​() es que la mayoría de los navegadores capturan los píxeles en un tamaño específico (el tamaño natural del elemento), por lo que si lo escala hacia arriba, las cosas se ven borrosas o pixeladas. Nuevamente, esto normalmente solo importa si está escalando algo HACIA ARRIBA . Ah, y superponer algo ocupa memoria. Si excede la memoria de la GPU, puede ralentizar las cosas. En mi experiencia, esto rara vez sucede.

La versión reciente de GSAP de GreenSock utilizará automáticamente la técnica que tenga más probabilidades de ofrecer los mejores resultados. Si solo está cambiando de posición, usará translate3d (). Si escala y mueve, usará translate3d () y scale (). Si tiene alguna rotación o sesgo, cambiará a matrix3d ​​() porque es más rápido. A partir de la versión 1.15.0, usa force3D: "auto", lo que significa que usará 3D durante la interpolación para obtener los beneficios de la estratificación, pero luego volverá a 2D cuando termine la animación para liberar memoria de la GPU. Es un sistema altamente optimizado. También puede obligarlo a usar la técnica que desee.

Me encontré con algunos descubrimientos interesantes al analizar el rendimiento de la animación CSS y JS. Grabé un screencast que quizás quieras ver: http://greensock.com/css-performance/ (asegúrese de leer los comentarios también).

6
Jack 6 feb. 2015 a las 04:03

Otra cosa que debe considerar es que la animación de matrices no le brindará todas las opciones que tiene para las transformaciones de animación, especialmente si está configurando rotaciones.

El más obvio es la animación de rotar (0deg) a rotar (360deg). La matriz equivalente de ambos es la misma (obviamente). Debe configurar las transformaciones con rotar, o no funcionará.

En transformaciones complejas, normalmente configurar las transformaciones con matrices no le dará la animación que espera.

Pero, si solo usa traducciones, como lo indica su título, cualquier cosa de esto es un problema

2
vals 6 feb. 2015 a las 16:40

En esencia, tanto translate3d() como matrix3d() son transformaciones matriciales.

translate3d(dx, dy, dz):

Sample image 1

matrix3d(a1, a2, a3, a4, b1, b2, b3, b4, c1, c2, c3, c4, d1, d2, d3, d4):

Sample image 2

El primero es simplemente una abreviatura de solo mover un elemento, mientras que el segundo le permite especificar la matriz completa. Dado que ambos utilizan las mismas estructuras subyacentes, su rendimiento será casi idéntico (para operaciones de escala similar).

4
Etheryte 6 feb. 2015 a las 00:59