How to do something everytime .animate repetition ends

Question

var track = Ti.UI.createView({
    width: 100, height: 30,
    backgroundColor: '#e8e8e8',
    top: '30%'
});
var progress = Ti.UI.createView({
    left: 0,
    width: 1, height: 30,
    backgroundColor: '#00c36a'
});
track.add(progress);
Ti.UI.currentWindow.add(track);
Ti.UI.currentWindow.addEventListener('open', function () {
    progress.animate({
        width: 100,
        duration: 10000,
        repeat: 6
});

I have made a custom progress bar using two views and .animate function. How do I do implement some functionality everytime a repetition of progress.animate() is completed

Answer 1

Try this:

var repeat = 6;
var rep = 0;

var autoProgress = function() {
    createAnimation(progress, function() {
        alert('complete nª-> ' + rep);
        rep++;
        if (rep < repeat) {
            autoProgress();
        }
    });
};
/**
 * create animation to view
 * @param Ti.UI.View view
 * @param {Function} callback
 */
var createAnimation = function(view, callback) {

    callback = _.isFunction(callback) ? callback : function() {
    };

    //create animate
    var animate = Titanium.UI.createAnimation({
        width : 100,
        duration : 10000,
    });

    /**
     * Fired when the animation complete.
     */
    animate.addEventListener('complete', function() {
        view.width = 0;
        callback();
    });

    view.animate(animate);
};

Ti.UI.currentWindow.addEventListener('open', autoProgress);