I'm currently building a compass app in HTML and CSS in a PhoneGap project with the DeviceOrientation plugin to get the compass heading.
I created a jsbin to emulate the heading change.
The problem I'm having is that when the value changes frequently (every 200 ms), the CSS transition stutters quite a bit.
You can see this problem in action by going to the jsbin I linked above and slowly drag the slider to increase or decrease the rotation degree, especially when you drag the slider back and forth slowly.
That leads me to believe that this is not just a performance or framerate issue; it's most likely caused by the quick value changes that interrupt the transition.
Please note in the actual PhoneGap application, the compass value is refreshed every 200 milliseconds (or some other arbitrary interval) instead of the inconsistent update interval you see in the jsbin simulation.
I tried to play with the transition duration a bit and none of them worked. Here's what I've tried:
- Tried to make the transition duration 0.5ms short than the value change interval. E.g. get new value every 500ms, set transition duration to be 450ms. Not only gives me stutter, but also make the entire transition lack significantly.
- Tried to make the transition duration longer than the update interval (out of despair), surprised that it worked... For a little while then start giving me stutter again.
- Tried to make the transition duration the same as the update interval, same stutters.
Now my question is: How should I go about making the CSS3 transition smooth without stutter when the rotation value changes frequently? Also, would switching to JavaScript animation alleviate this problem, like pausing the transition when the value changes?
Solution:
Replace CSS3 transition with Javascript animation. I used Velocity.js for the animation. Every time the compass heading value changes, I first finish the previous animation by doing Velocity(compass_element, "finish"), then I animate the rotateZ of that element.