Phonegap應用程序中的CSS硬件加速

我正嘗試在phonegap應用程序中使用硬件加速。我讀過，我必須把這個傾斜的css 3dtransform。所以，我在我的html元素的主類中使用了webkit-transform3d，但在動畫期間我仍然看到一些滯後。Phonegap應用程序中的CSS硬件加速

我想打開和關閉一個框，設置是從0到某些值的高度，反之亦然。

我在這裏寫一個例子：http://jsfiddle.net/VG7V5/6/

正如你所看到的，我已經定義了這樣的類容器：

#container { 
    box-shadow: 0.1em 0.1em 0.2em 0em #777777; 
    width: 100%; 
    max-height: 15em; 
    overflow-y: auto; 
    transform: translate3d(0em,0em,0em); 
    -webkit-transform:translate3d(0em,0em,0em); 
    -webkit-perspective: 1000; 
    -webkit-backface-visibility: hidden; 
}

如果我打開例子與我的Nexus 5採用Android 4.4 .2我在動畫中看到了一些滯後現象，無論是否啓用了transform3d（事實上在jsfiddle中，它始於轉換註釋）。這似乎沒有什麼變化。

有什麼問題？

Thx

來源

2014-01-12 ira

硬件加速工程如果有資源，我不相信智能手機具有高性能圖形卡來減輕主處理器的負擔 –

此外，智能手機有一個圖形處理器單元..網絡上有很多文章這個主題.. – ira

是的，但它有足夠的芯片強大的計算，而不是像普通電腦那樣的主處理器嗎？ –

也許我自己找到了解決方案。

如在本article

說明能夠實現高性能的動畫，如果他們是這些類型的：位置，縮放，旋轉或不透明度。

基本上動畫不應該改變元素的尺寸，因爲它會導致cpu/gpu的開銷太大。

所以，改變元素的高度，就像在我的例子中那樣，並不是一個好主意。：D

來源

2014-01-16 14:16:14 ira

+1電話（和HTML5）動畫的重要參考。我正在使用使用左/頂部屬性的轉換，並且在動畫中看到一些滯後現象。使用translate3d（或只是翻譯）真正平滑這些動畫！謝謝！ –

Phonegap應用程序中的CSS硬件加速

回答

相關問題