在播放音乐时,我尝试了几种不同的 css 动画来在屏幕上上下移动大图像。我没有发现任何速度、转换距离等方面的变化会导致平稳过渡。
3 回答
如果您查看 Chromecast Chrome 调试器的时间轴面板中的事件,您会发现任何绘制到合理数量的屏幕大约需要 100 毫秒。是的,1/10 秒!这使得任何类型的动画(CSS、JQuery 等)都非常棘手,并且经常会跳动。
对于元素的移动,我没有看到 CSS 动画性能与 JQuery animation() 性能有任何差异。我希望是因为糟糕的绘画时间隐藏了任何差异。
有人会认为 Google 会使用一些出色的视频硬件来提高 Chromecast 浏览器的绘制性能,但这种类型的 Chromecast 应用似乎并不是他们的用例之一。
我正在开发一个 chromecast 应用程序,其中有一个非常大的绝对定位的 DIV,我在屏幕上和屏幕外制作动画。它有一个非常复杂的布局,其中包含 html、css 和图像,甚至是动画 GIF。但是,只要我确保在动画执行时没有回流,我就可以通过使用transform: translate()
CSS 控制它的位置来获得良好的性能。之前在修改top
css属性,但是性能很差。
为了举例说明,这里有一些 HTML:
<body>
<div>
... Main content ...
</div>
<div id="overlay">
... Overlay content here ...
</div>
</body>
以及相应的CSS:
#overlay {
position: absolute;
top: 25px;
left: 50px;
width: 1180px;
height: 670px;
transition: all 1s;
transform: rotate(-2deg) translateY(750px);
}
#overlay.active {
transform: rotate(-2deg) translateY(0);
}
有了这个,我在我的 javascript 中所做的就是active
打开和关闭类,以使覆盖层显示和隐藏自身。我无法让时间线调试器与远程 chromecast 一起工作,所以我不确切知道 FPS 是什么,但客观上感觉至少是 30fps。它绝对看起来很顺利。我希望这会有所帮助。
请记住,Chromecast 设备
- 资源有限(CPU 和内存)
- 有精简版的 chrome
结果,您将无法进行许多在台式机上可以进行的花哨的转换/翻译,或者性能(它的流畅程度)不会是您想要的,更多因此,如果您同时播放媒体。