Задача компаса вращающегося JavaScript с углом - вращать / переводить - PullRequest
Новая
       8

Задача компаса вращающегося JavaScript с углом - вращать / переводить

1 голос
/ 27 февраля 2010

Я создаю компас для iphone, да, просто для эксперимента и чтобы узнать, как это сделать, в javascript, с пробелом в телефоне.

Теперь я уже могу получить градусы, я смог применить градус 0-360 к div (назовем его «колесо»), используя webkit-transform translateZ (или я мог бы использовать rotate)

но у меня есть ошибка:

когда колесо поворачивается от 0 градусов до 359 градусов, все в порядке, но когда степень снова возвращается к 0 градусов, вместо плавного вращения в этом направлении (по часовой стрелке), оно быстро снова вращается против часовой стрелки до положения 0 градусов ...

Не знаю, понятно, потому что без примера нелегко объяснить ... '

В основном моя проблема заключается в том, чтобы найти правильный сценарий для перемещения колеса, начиная со значения 0-360, которое я могу легко получить с iphone.

любые предложения приветствуются.

Ответы [ 2 ]

1 голос
/ 28 февраля 2010

Я не вижу ни одной кнопки, чтобы комментировать ... извините, но я должен написать здесь ... это мой код

градус - это значение, которое iphone дает мне и может от 0 до 360.

document.getElementById (' mycompass '). Style.webkitTransform = "rotateZ (" + -deg + "deg)";

когда ' mycompass ' идет к 359, а затем к 0, он вращается полностью назад ...

в вашем примере я могу иметь значения больше 360, так что это не работает для меня ...

где моя ошибка?

1 голос
/ 27 февраля 2010

Перевернитесь, когда вы получите больше 360. Вот пример: http://gutfullofbeer.net/rotate.html

[править] Я обновил код, чтобы иметь дело с вращением против часовой стрелки. Вот как выглядит мой Javascript на основе jQuery: 

  $(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);
  });
...