var a = Titanium.UI.createAnimation();
a.top = 400;
a.left = 0;
a.duration = 5000;

flag.animate(a, function(){
    clearInterval(interval);
});

var interval = setInterval(function()
{
    if (flag.animatedCenter.y >= 220){
        flag.animate({center:{x:flag.animatedCenter.x,y:flag.animatedCenter.y }});
    };

},10);

4 Answers

• I know this was posted a billion years ago (which are mostly all of the questions/answers I find when I google appcelerator problems) but calling .animate() to stop an animation does not work (anymore?). We are using the latest version .. 3.somethingsomething. I honestly can't find any way of stopping an animation. Anyone knows how you are supposed to do it these days?

• Have you tried this: http://developer.appcelerator.com/question/102271/how-to-cancel-an-animation calling: obj.animate() on an object that is animating should stop it.

• The KS sample is incorrect. According to the new UICompositeLayout specs, top and left have a higher precedence than center. So trying to stop an animation by defining a center with the top,left,width and height defined is essentially a no op.

  The KS sample was filed as a bug and has been fixed here

  https://github.com/appcelerator-developer-relations/KitchenSink/pull/93

• I wasn't able to find an answer posted, so here's what I came up with (in my case, I was rotating a refresh button).
  For iOS it was easy. I just defined a stop animation as:

  var stopRotation = Ti.UI.createAnimation({
    anchorPoint: { x: 0.5, y: 0.5 },
    repeat: 1,
    transform: Ti.UI.create2DMatrix({ rotate: 0 })
  });
  $.refreshButtonIos.animate(stopRotation);
  

  For Android I couldn't find any good way that worked, even after upgrading my project to 3.3.0 and setting overrideCurrentAnimation to true on the button. So instead, when my refresh is complete, my code calls a function that remove that button and replaces it with one that looks identical. The full method is below, including where I set a refreshButton variable based on the OS, and if it's Android I use createStyle so that I can reapply the tss to my new button.

  var refreshButton = (OS_ANDROID) ? $.refreshButtonAndroid : $.refreshButtonIos;
  var refreshButtonStyle = (OS_ANDROID) ? $.createStyle({ classes: ['refreshButton'] }) : null;
  
  var stopRefreshButton = function() {
    if (!isRefreshInProgress) {
      return;
    }
    isRefreshInProgress = false;
  
    if (OS_IOS) {
      refreshButton.animate(stopRotation);
    } else {
      var newRefreshButton = Ti.UI.createButton();
      newRefreshButton.applyProperties(refreshButtonStyle);
      newRefreshButton.addEventListener('singletap', refreshResults);
  
      $.header.remove(refreshButton);
      refreshButton = newRefreshButton;
      $.header.add(refreshButton);
    }
  };
  

  It's admittedly hackish, so hopefully someone will come along eventually and post a way that works using the overrideCurrentAnimation property instead, but this should do the trick for you in the meantime.