風格計算爲gpu加速動畫在鉻

這是一個鉻只問題。我使用OSX鉻56，但我也使用Chrome 57風格計算爲gpu加速動畫在鉻

測試了這個在Windows 8上我有一個動畫是GPU加速，使用will-change: transform使用transform: translateY(...)來移動屏幕上的元素的關鍵幀動畫。

.block { 
    height: 20vh; 
    width: 20vh; 
    background-color: black; 
    animation: move 5s linear infinite; 
    will-change: transform; 
} 

@keyframes move { 
    0% { transform: translateY(0%); } 
    50% { transform: translateY(400%); } 
    100% { transform: translateY(0%); } 
}

實施例上codepen：http://codepen.io/nicokoenig/full/PmYaOZ/

本身的鉻合金合成線程上處理，並且如果主線程被阻塞時，以不影響該動畫。

當我錄製時間線時，我仍然看到每個幀都有一個樣式計算。

爲什麼chrome需要重新計算樣式，即使動畫是在合成器線程上處理的？

UPDATE

我回顧我的代碼，增加了三種類型的動畫。

第一個反義詞是使用固定的視口單元（vh）來翻譯該框。
第二個動畫是使用固定的像素值來翻譯該框。
第三個動畫是使用百分比值來翻譯框。

我還添加按鈕來阻塞主線程 - 如果我打的按鈕：

第一和第二動畫將仍然在屏幕上移動，第三個凍結。

我認爲這是答案 - 在整個動畫過程中，使用翻譯百分比值的animatoin需要重新計算樣式。

來源

2017-04-11 Nico König

見[時間表的屏幕截圖（https://i.stack.imgur.com/wlivh.png）上codepen –

更新演示：http://codepen.io/nicokoenig/full/PmYaOZ / –

風格計算爲gpu加速動畫在鉻

回答

相關問題