Question

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

Answer 1

请记住Chromecast设备

资源有限（CPU和内存都有）
有一个精简版的chrome

因此，您无法进行许多花哨的过渡/翻译，而这些过渡/翻译可以在桌面上进行，或者性能（它的平滑程度）不会是您想要的如果你同时播放媒体，那就更好了。

Answer 2

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

对于元素的移动，我没有看到CSS动画性能与JQuery动画（）性能的任何差异。我希望因为可怕的Paint时间隐藏任何差异。

有人会认为谷歌会使用一些优秀的视频硬件来改善Chromecast浏览器的绘画性能，但这种类型的Chromecast应用似乎不是他们的用例之一。

Answer 3

我正在开发一个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上获得大型图片，翻译/动画的成功？

3 个答案: