var t = Ti.UI.create2DMatrix();
var a = Titanium.UI.createAnimation();
Titanium.Geolocation.addEventListener('heading',function(e)
{
...
t = t.rotate(360 - e.heading.magneticHeading);
a.visible = true;
a.opacity = 1;
image.animate(a);
}

2 Answers

• I had the same problem creating a watch app. I assumed that as I was animating something I should use the animation api, however, this creates an animation that starts and returns to 0 degrees so my watch flickered a lot and the hands appeared to be stuck at 12 o`clock.

  I suspect that your compass flickers with the needle pointing north.

  The solution is to use a transform on an imageview not an animation, below is some code from my watch that should demonstrate.

  
  var second_hand = Titanium.UI.createImageView({
      url:'images/secondhand.png',
      width:26,
      height:120,    
      top:125,
      left:129,
      anchorPoint:{x:0.5,y:0.717}
  });
  
  function tick() {
  
      var rot_second = Ti.UI.create2DMatrix();
  
      currentTime = new Date();
      curdate = currentTime.getDate();
      curday = currentTime.getDay();
      hours = currentTime.getHours();
      minutes = currentTime.getMinutes();
      seconds = currentTime.getSeconds();
      millis = currentTime.getTime() % 1000;
      ticks = Math.floor(millis / 250);
  
  
      second_hand_angle = (6 * seconds) + (1.5 * ticks);
      rot_second = rot_second.rotate(second_hand_angle);
      second_hand.transform = rot_second;
  }
  

  Hope this helps.

• Wow, 2 years later and this code works perfect! Thanks!