How do I use javascript to determine if my animation is too slow and instead use instant changes?


I have a web page that uses javascript+css animation. On many computers, this will run very well, but on some slower systems (like tablets) it can be awful. In those cases I want to gracefully degrade to simply moving the objects to their final position instantly without animation. My problem is that:

  1. I don't want to force a user to have to make the choice (I want to figure out if animation will be too slow programatically)

  2. I don't want them to suffer through 5-10 seconds of super slow animations while my code tries to figure out the FPS of the javascript animations. Instead I want a fast way of figuring this out.

Is this even possible? Or do I have to run animations for 3-5 seconds to figure out if animations will run well on their system? (Checking it in 1 second or less means hiccups in their system will kill animation incorrectly)

All I've come up with so far is something like this (pseudo code):

Strarting the Animation

//Total number of steps in our animation (This is calculated normally)
var totalSteps = 20;

//Amount of time between each setInterval/setTimeout
var delay = 20; //milliseconds

//Total expected time to animate entire process
var expectedDuration = dealy * totalSteps;

//Our starting time
var startTime = new Date().getTime();

/*** Start the animation ***/

At Final step of animation

//Current time
var endTime = new Date().getTime();

//Actual time it took
var actualDuration = endTime - startTime;

//Check difference in expected time vs actual time
var diff = actualDuration - expectedDuration;

The problem is that code forces me to run animation for a bit first, thus subjecting users on slow systems to slow, jerky animations for a bit.

Is there a way to do this?

My suggestion would be this:

1) Use an animation function that runs for a fixed time and adjusts the step size according to how fast each step is running. This will NEVER subject a user to a long animation that takes longer than intended. It may be choppy, but it won't be slow to finish. The general idea for this type of animation algorithm is that you set a total time for the animation, you calculate an expected number of steps. You start running each step, but at each step you check the elapsed time to see if you are behind schedule. If you are behind schedule (because the host computer is too slow), you jump forward the amount needed to get you back on schedule. This jump forward makes the animation choppier than desired, but keeps you on schedule. All animation libraries I've seen like jQuery and YUI work this way.

2) In each of the first few animations (done the way above), accumulate a stepCnt that tells you how many steps were done in each animation in the fixed time.

3) From some experience running your animations on fast and slow devices, figure out what stepCnt value signifies a performance that is slow enough that your UI would be better off without the animation at all.

4) Make your code adaptive. If, after the first few animations from step 2), you see that the stepCnt is below your threshold (that you determined in step 3), then set a global flag that you want to skip animations so all future animations will just go right to the end state.