Has anyone had success with large image, translation/animation on Chromecast?

问题

I've attempted several different css animations to move a large image up and down on the screen while I have music playing. I haven't found any variation on speed, distance translated, etc that results in a smooth transition.

回答1:

Remember that a Chromecast device

has limited resources (both CPU and memory)
has a stripped-down version of chrome

As a result, you won't be able to do many fancy transitions/translations that you are otherwise able to do on a desktop or the performance (how smooth it is) is not going to be what you would like it to be, more so if you are playing a media concurrently.

回答2:

I'm developing a chromecast application where I have a very large, absolute-positioned DIV that I'm animating on and off of the screen. It has a pretty complicated layout in it with html, css and images, even animated GIFs. However, as long as I make sure there are no reflows while the animation is performing, I've gotten good performance by using transform: translate() CSS to control it's position. Previously, I was modifying the top CSS property, but the performance was pitiful.

For an example to illustrate, here's some HTML:

<body>
    <div>
        ... Main content ...
    </div>
    <div id="overlay">
        ... Overlay content here ...
    </div>
</body>

And the corresponding 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);
}

With this, all I do in my javascript is toggle the active class on and off to cause the overlay to show and hide itself. I can't get the timeline debugger to work with the remote chromecast, so I don't know exactly what the FPS is, but it objectively feels like at least 30fps. It definitely seems smooth. I hope that helps.

回答3:

If you look at the Events in the Timeline panel of the Chromecast Chrome debugger, what you'll find is that any Paint to a reasonable amount of the screen takes about 100ms. Yes, 1/10 of a second! This makes any kind of animation (CSS, JQuery, etc.) very tricky and often jumpy.

For the movement of elements, I haven't seen any difference in CSS animation performance vs. JQuery animation() performance. I expect because the awful Paint times hide any differences.

One would have thought that Google would have used some of that great video hardware to improve the Chromecast browser paint performance, but this type of Chromecast app does not appear to be one of their uses cases.

来源：https://stackoverflow.com/questions/19368667/has-anyone-had-success-with-large-image-translation-animation-on-chromecast

标签

chromecast