Animazioni CSS 3. translate3d versus matrix

Question

Ho fatto progetti che hanno richiesto transizioni e animazioni fluide. Recentemente abbiamo migrato dall'uso delle animazioni Javascript a CSS quasi il 100% delle volte.

Ho trovato utilizzando translate3d fornisce un'animazione piacevole molto liscia su entrambi i dispositivi mobili e desktop.

Il mio stile di animazione corrente è simile a questo:

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); 
} 

Recentemente, ho iniziato a guardare in diversi quadri che sembrano essere sempre un sacco di buzz. Due in GreenSock specifici (http://greensock.com/tweenmax) e Famo.us (http://famo.us). Entrambi mostrano incredibili frame-rate e prestazioni sorprendenti.

Sto notando che stanno utilizzando una trasformata martix.

esempio Greensock (con matrice):

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

Famo.us esempio (usando 3D-matrice):

<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> 

mia domanda è ... Qual è la differenza tra translate3d e matrix? C'è un enorme miglioramento usando matrix su translate3D? C'è un altro metodo là fuori che produce risultati ancora migliori?

Sono stato contento di translate3D, ma voglio imparare qualsiasi metodo fornisca le animazioni migliori e in cerca di indicazioni su cosa potrebbe essere.

Answer 1

Nit è corretto: nella maggior parte degli scenari del mondo reale, le prestazioni sarebbero indistinguibili tra translate3d() e matrix3d ​​(). In definitiva, tutte le trasformazioni vengono convertite in una matrice a un certo livello perché è così che la GPU rende le cose (almeno questo è ciò che capisco).

Una matrice() e matrice3d() non contengono solo i dati posizionali, ma anche rotazione, scala e inclinazione.

Hai chiesto se c'è una differenza di prestazioni tra matrice() e matrice3d() e la risposta è "a volte".matrix3d ​​() (o qualsiasi trasformata correlata al 3D) generalmente obbliga il browser a "stratificare" quell'elemento (pensatelo come scattare una foto dei suoi pixel e memorizzarli sulla GPU) che è quindi più veloce da manipolare poiché i suoi pixel sono separati dal resto dello schermo/livelli '. In genere vedrai animazioni più fluide con questa tecnica. Tuttavia, c'è un piccolo costo per stratificare qualcosa inizialmente (spola i pixel alla GPU).

L'altro lato negativo di matrix3d ​​() è che la maggior parte dei browser acquisisce i pixel con una dimensione specifica (la dimensione naturale dell'elemento), quindi se si scala in alto, le cose sembrano sfocate o pixelate. Anche in questo caso, in genere ciò conta solo se si ridimensiona qualcosa UP. Oh, e stratificare qualcosa prende memoria. Se superi la memoria della GPU, può rallentare le cose. Nella mia esperienza, capita raramente.

La versione più recente di GreenSock's GSAP utilizzerà automaticamente qualsiasi tecnica abbia più probabilità di fornire risultati ottimali. Se cambi solo posizione, verrà utilizzato translate3d(). Se ridimensionate e spostate, userà translate3d() e scale(). Se hai qualche rotazione o inclinazione, passerà a matrix3d ​​() perché è più veloce. A partire dalla versione 1.15.0, utilizza force3D: "auto", che significa che utilizzerà 3D durante l'interpolazione per ottenere i vantaggi della stratificazione, ma poi tornerà in 2D quando l'animazione è finita per liberare la memoria della GPU. È un sistema altamente ottimizzato. Puoi costringerlo a usare qualsiasi tecnica tu voglia.

Mi sono imbattuto in alcune scoperte interessanti durante l'analisi delle prestazioni dell'animazione CSS e JS. Ho registrato uno screencast che potresti voler controllare: http://greensock.com/css-performance/ (assicurati di leggere anche i commenti).

Answer 2

Al loro interno, sia translate3d() sia matrix3d() sono trasformazioni di matrice.

translate3d(dx, dy, dz):

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

Il primo è semplicemente un'abbreviazione per muovendo solo un elemento, mentre il secondo consente di specificare l'intera matrice. Poiché entrambi usano le stesse strutture sottostanti, le loro prestazioni saranno quasi identiche (per operazioni di scala simile).

Answer 3

Un'altra cosa da considerare è che le matrici di animazione non ti offrono tutte le opzioni che hai trasformando animando, specialmente se stai impostando le rotazioni.

Il più ovvio si sta animando da ruotare (0 gradi) per ruotare (360 gradi). La matrice equivalente di entrambi è la stessa (ovviamente). È necessario impostare le trasformazioni con rotazione, altrimenti non funzionerà.

Nelle trasformazioni complesse, in genere l'impostazione delle trasformazioni con le matrici non ti darà l'animazione che ti aspetti.

Ma, se si utilizzano solo traduzioni, come suggerisce il titolo, nulla di questo c'è un problema