Compass spinning javascript problem with angle - rotate/translate

问题

i'm building a compass for the iphone, duh, just for experiment purpose and to learn how to do it, in javascript, with phonegap.

now i'm already able to get the degrees, i was able to apply the deg 0-360 to a div (let's call it the "wheel") using the webkit-transform translateZ (or i could use rotate)

but i have a bug:

when the wheel goes from 0deg to 359deg everything is ok, but when the degree goes to 0deg again, instead of smoothly spin in that direction (clockwise), it spin rapidly again anti-clockwise to the positin 0deg...

i dont know i'm clear because is not easy to explain without an example....'

basically my problem is to find the right script to move the wheel starting with the value 0-360 that i can get easily from the iphone.

any suggestions are welcome.

回答1:

Roll over when you get bigger than 360. Here's a sample: http://gutfullofbeer.net/rotate.html

[edit] I've updated the code to deal with counter-clockwise rotation. Here's what my jQuery-based Javascript looks like:

  $(function() {
    var rotator = function(class, inc) {
      var degrees = 0;
      return function() {
        $('.' + class)
          .css({'-webkit-transform': 'rotate(' + degrees + 'deg)'})
          .css({'-moz-transform': 'rotate(' + degrees + 'deg)'})
          ;
        degrees += inc;
        if (degrees > 360) degrees -= 360;
        if (degrees < 0) degrees += 360;
      };
    };
    setInterval(rotator('clockwise', 2), 33);
    setInterval(rotator('counter-clockwise', -2), 33);
  });