css 动画期间的屏幕撕裂，以及 css 动画的断断续续

Question

我在 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 动画？

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

Answer 1

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