每次.animate重復結束時如何做某事

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
});

我使用兩個視圖和.animate函數制作了一個自定義進度欄。 每當重復progress.animate（）完成時，我如何實現某些功能

Answer 1

這是一個JQuery動畫Complete回調的示例。

 var cbFunction = function(){ //Animation Complete Callback function alert('animation completed!'); } //Test buntton click event $(".testbutton").on('click',function(){ //Launch animation $(".test").animate({width:100},1000,cbFunction); }); 

 .test{ background-color:#ff0000; width:200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class="testbutton">TEST</button> <div class="test">-</div> 

Answer 2

嘗試這個：

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);