css動畫期間的屏幕撕裂以及動盪的css動畫

我在chromecast上運行的接收器應用程序上使用了css動畫，並且我注意到了它的兩個問題。css動畫期間的屏幕撕裂以及動盪的css動畫

首先，動畫非常複雜。我估計它看起來大概是每秒5幀。

其次是動畫過程中的屏幕撕裂問題。看起來系統在交換緩衝區之前沒有等待vblank？

我用了一個測試圖像，這是我的CSS定義爲動畫：

#testImage { 
    animation-name:    seesaw; 
    animation-duration:   5.0s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 

    -webkit-animation-name:    seesaw; 
    -webkit-animation-duration:   5.0s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

@-webkit-keyframes seesaw { 
    0% { left: 0px; } 
    50% { left: 500px; } 
    100% { left: 0px; } 
} 
@keyframes seesaw { 
    0% { left: 0px; } 
    50% { left: 500px; } 
    100% { left: 0px; } 
}

難道我做錯了什麼，或者我應該避免使用CSS動畫共接收器上的應用程序？

有沒有人有任何建議，我會做什麼動畫？

來源

2013-08-27 jchionh

看到有關此問題的其他有關信息[大圖像平移] [1] [1]：http://stackoverflow.com/questions/19368667/has -any-success-with-large-image-translation-animation-on-chromecast？rq = 1 – user2880296

我不認爲你做錯了什麼，只是chromecast設備的動畫能力有限。萊昂·尼科爾斯做了一些有益的基準位置：https://plus.google.com/117916055521642810655/posts/9dBQp7SShv8

來源

2013-09-08 03:34:32

感謝您的鏈接。儘管繪畫時間是100ms，這太長了，我相信屏幕撕裂問題是chromecast不與交換緩衝區同步。這會造成撕裂效應。 – jchionh

css動畫期間的屏幕撕裂以及動盪的css動畫

回答

相關問題