4

在播放音乐时，我尝试了几种不同的 css 动画来在屏幕上上下移动大图像。我没有发现任何速度、转换距离等方面的变化会导致平稳过渡。

4

3 回答 3

2

如果您查看 Chromecast Chrome 调试器的时间轴面板中的事件，您会发现任何绘制到合理数量的屏幕大约需要 100 毫秒。是的，1/10 秒！这使得任何类型的动画（CSS、JQuery 等）都非常棘手，并且经常会跳动。

对于元素的移动，我没有看到 CSS 动画性能与 JQuery animation() 性能有任何差异。我希望是因为糟糕的绘画时间隐藏了任何差异。

有人会认为 Google 会使用一些出色的视频硬件来提高 Chromecast 浏览器的绘制性能，但这种类型的 Chromecast 应用似乎并不是他们的用例之一。

于 2013-10-25T18:35:14.453 回答
2

我正在开发一个 chromecast 应用程序，其中有一个非常大的绝对定位的 DIV，我在屏幕上和屏幕外制作动画。它有一个非常复杂的布局，其中包含 html、css 和图像，甚至是动画 GIF。但是，只要我确保在动画执行时没有回流，我就可以通过使用transform: translate()CSS 控制它的位置来获得良好的性能。之前在修改topcss属性，但是性能很差。

为了举例说明，这里有一些 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。它绝对看起来很顺利。我希望这会有所帮助。

于 2015-03-30T19:53:24.467 回答
0

请记住，Chromecast 设备

  • 资源有限（CPU 和内存）
  • 有精简版的 chrome

结果，您将无法进行许多在台式机上可以进行的花哨的转换/翻译，或者性能（它的流畅程度）不会是您想要的，更多因此，如果您同时播放媒体。

于 2013-10-14T21:33:26.750 回答