3

我在 chromecast 上运行的接收器应用程序上使用 css 动画，我注意到它有 2 个问题。

首先，动画非常挑剔。我估计它看起来可能大约每秒 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 动画？

有人对我如何制作动画有任何建议吗？

4

1 回答 1

2

我不认为你做错了什么，只是 chromecast 设备的动画能力有限。Leon Nichols 在这里做了一些有用的基准测试：https: //plus.google.com/117916055521642810655/posts/9dBQp7SShv8

于 2013-09-08T03:34:32.900 回答