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

在css动画期间屏幕撕裂，以及波涛汹涌的CSS动画

1 个答案: