I want to export my graphic design/animation from Adobe Animate to HTML5 canvas.
I'm a graphic designer and not a webdeveloper or coder.
I have noticed that when I export my graphic design to HTML5 in Animate, when viewing in the webbrowser, I see that it draws a lot of Power from the GPU.
I'm making something for a website where you see an animation when entering the website and then the final frame is a still frame and is kept on the screen. At the moment that still frame keeps drawing power from the GPU, and i don't understand why.
So i did some testing. I took a simple bitmap image (1920x1080) put it onto a HTML5 canvas (25fps) in Animate and exported that as a HTML5 without any animations.
I noticed that even though it is a still frame, it keeps drawing power from the GPU (+/- 10%).
When Changing the 25 fps to 1 fps, I noticed a drop to 1% GPU usage.
So this probably means that even though it is a still frame, HTML5 sees it as an animation?
Is that something that I can change in Animate without any coding?
Animate redraws the entire stage every frame.
Yes I understand. What I don't understand is why a still image that is just one frame keeps beeing redrawn.
My understanding of HTML is very limited, there are probably other and better ways to incorporate animations in HTML5 then use Animate?
I don't know of the reason that Canvas has to redraw itself even if nothing has changed, but as a work around to your example, this should help:
createjs.Ticker.framerate = 1;
You could set the frame rate to be 1 fps, while you are lingering on a static image, and then change it to something faster if you need to animate something.
It redraws the stage every frame because there's no way for it to track if anything's going to be different this time. There could be some code drawing different things each frame for all it knows. This is how pretty much all rendering engines work. Redraw everything, every time, no matter what.
Thank you for explaining this. Makes sense.