Problem in animating Images like opening door

Question

Problem in animating Images like opening door

You must Login before you can answer or comment on any questions.

Hi All! I want to open a door in when my app start. I have 27 Images (frames) of animation. 1.png is complete close door and then 2.png is opened slightly and so on 27.png is fully opened door. I have written this code, but images are not shown in animation.. please help me out..

var win1 = Titanium.UI.createWindow({
    title : 'Tab 1',
    backgroundColor : '#fff'
});
win1.open();
view_slider = Ti.UI.createView({
    // backgroundImage: 'images/1.png',
    backgroundColor : 'white'
});
win1.add(view_slider);
 
//Images name array
var img_arr = new Array();
for(var i = 0; i < 27; i++) {
    var j = i + 1;
    img_arr[i] = j + '.png';
}
// Create an ImageView.
for(var indx = 0; indx < 27; indx++) {
    Ti.API.info("Image Array = images/" + img_arr[indx]);
    var IV = Ti.UI.createImageView({
        image : 'images/' + img_arr[indx],
    });
 
    IV.animate({
        duration : 1000,
        curve : Titanium.UI.ANIMATION_CURVE_EASE_IN
    });
 
    view_slider.add(IV);
}

3 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

Hi Abdul, if you have all the images then try to simple display image in interval like this.

var counter = 0;
 
var img = Ti.UI.createImageView({
    image : arr[counter];
});
win.add(img);
 
var t = setInterval(function(e) {
    if(counter < 27) {
        img.image = arr[counter];       
    }
    else
    {
        clearInterval(t);
    }
    counter++;
}, 100);

Answer 2

Hi Abdul,

If you have all images then try to animate image and don't use curve : Titanium.UI.ANIMATION_CURVE_EASE_IN just refere this link that help you.Best luck

Answer 3

I found that when JPGs are too heavy to load they don't show as they should. They worked fine in my Simulator but didn't in the real device. Does that code work in the Simulator?