Canvas Animation Dilemma: FPS vs. Length

[@russellsdesk]

I've created a 24 FPS, 30-second HTML5 canvas animation. However, publishers are concerned that the length exceeds 30 seconds.

They've suggested increasing the FPS to 30, which results in a faster animation.

Have others encountered this issue, and how to fix it?

[kglad]

either remove some frames or increase the frame rate.

[@russellsdesk]

According to the Publishers, the banner is longer than 30 seconds. But in Animate, it stops at 30 seconds.

[kglad]

the time required depends on the computer playing the animation.

[DigitalDesignDude]

Adding onto what kglad mentioned, if a device cannot play the canvas animation at 24FPS consistently, then some frames might take longer to draw than others, depending on how complex your art or animation is.

One way you can verify if there are any dips in the frame rate, is to place the following JS code in the first frame of your project. It will display an FPS counter in the top left corner of your canvas when run.  

createjs.Ticker.addEventListener("tick", handleTick);

let lastTime = 0;
let fps = 0;
const fpsText = new createjs.Text("FPS: 0", "20px Arial", "#ff7700");
fpsText.x = 10;
fpsText.y = 10;
this.addChild(fpsText);

function handleTick(event) {
	const currentTime = createjs.Ticker.getTime();
	const deltaTime = currentTime - lastTime;
	fps = Math.round(1000 / deltaTime);
	fpsText.text = "FPS: " + fps;
	lastTime = currentTime;
}

You might also have to test the animation on a mobile device to ensure it runs well there.

 

 

[@russellsdesk]

Thank you for your response. It fluctuates from 22-24 fps.

[kglad]

again, either remove some frames or increase the frame rate.