CSS 3動畫。 translate3d與矩陣

我一直在做需要平滑過渡和動畫的項目。我們最近幾乎100％的時間都從使用Javascript轉換爲CSS動畫。CSS 3動畫。 translate3d與矩陣

我發現使用translate3d在手機和桌面上都提供了非常流暢的動畫。

我現在的動畫風格是這樣的：

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

最近，我已經開始考慮這樣做似乎得到了很多議論不同的框架。兩個在特定的GreenSock（http://greensock.com/tweenmax）和Famo.us（http://famo.us）。兩者都表現出令人敬畏的幀率和驚人的性能。

我注意到他們正在使用martix變換。

使用GreenSock例如（使用矩陣）：

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

Famo.us例如（使用3D矩陣）：

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

我的問題是...有什麼區別translate3d和矩陣之間？在translate3D上使用矩陣有很大的改進嗎？還有另外一種方法可以產生更好的結果嗎？

我對translate3D感到滿意，但想要學習任何方法會給出最流暢的最佳動畫並尋找可能的指導。

來源

2015-02-06 w3bMak3r

Nit是正確的 - 在大多數現實世界中，性能在translate3d（）和matrix3d（）之間無法區分。最終，所有變換都會在某個級別轉換爲矩陣，因爲這是GPU渲染事物的方式（至少這是我的理解）。

矩陣（）和矩陣3d（）不僅包含位置數據，還包含旋轉，縮放和傾斜。

您問過matrix（）和matrix3d（）之間是否存在性能差異，答案是「有時」。matrix3d（）（或任何與3D相關的變換）通常會強制瀏覽器對該元素進行「層化」（想像它拍攝像素的照片並將它們存儲在GPU上），然後由於其像素分離而更快地進行操作從屏幕的其餘部分/層'。通常你會看到這種技術更平滑的動畫。然而，初始層化一些東西需要很小的成本（將像素穿梭到GPU）。

matrix3d（）的另一個缺點是大多數瀏覽器都以特定尺寸（元素的自然尺寸）捕獲像素，所以如果按比例縮放，事情看起來模糊或像素化。同樣，這通常只在縮放某些東西時才起作用UP。哦，分層的東西佔用了內存。如果超過GPU的內存，它可能會降低速度。根據我的經驗，這很少發生。

最近版本的GreenSock's GSAP將自動使用最有可能提供最平滑結果的技術。如果你只是改變立場，它會使用translate3d（）。如果你縮放並移動，它將使用translate3d（）和scale（）。如果你有任何旋轉或偏斜，它會轉移到matrix3d（），因爲這是最快的。從版本1.15.0開始，它使用force3D：「auto」，這意味着它將在補間期間使用3D來獲得層化的好處，但在動畫結束時切換回2D以釋放GPU內存。這是一個高度優化的系統。你也可以強制它使用你想要的任何技術。

在分析CSS和JS動畫的性能時，我偶然發現了一些有趣的發現。我錄製了一個截屏視頻，你可能想看看：http://greensock.com/css-performance/（一定要閱讀評論）。

來源

2015-02-06 04:03:39 Jack

在其核心，translate3d()和matrix3d()是矩陣變換。

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

前者簡直是唯一的運動元素，而後者則允許你指定整個矩陣的簡寫。由於它們都使用相同的基礎結構，因此它們的性能幾乎相同（對於類似規模的操作）。

來源

2015-02-06 00:59:16 Nit

是否有矩陣和的Matrix3D之間的性能差異？ – w3bMak3r 2015-02-06 01:23:30

你必須考慮的另一件事是，動畫矩陣不會給你所有的動畫變換選項，特別是如果你正在設置旋轉。

最明顯的是從旋轉（0deg）到旋轉（360deg）的動畫效果。兩者的等價矩陣是相同的（顯然）。你需要用旋轉來設置變換，否則它將不起作用。

在複雜變換中，通常使用矩陣設置變換不會給您所期望的動畫。

但是，如果你只使用翻譯，爲您的標題所暗示的，這個東西是一個問題

來源

2015-02-06 16:40:14 vals

要說清楚的是，這只是當你談論純CSS的時候。儘管GSAP使用矩陣來應用變換，但由於其管理數據下的數據的方式，旋轉到360度或720度或任何其他位置都不成問題。但你是對的 - 只有在CSS中定義矩陣纔有這些限制。 – Jack 2015-02-07 01:13:45

CSS 3動畫。 translate3d與矩陣

回答

相關問題