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动画完成回调的示例。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何每次做某事。动画重复结束

2 个答案: