Animation is not working????

Question

Animation is not working????

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

var eventHome=Ti.UI.createWindow({
    background:"#000"
})
 
var categoryListing=Ti.UI.createView({
    width:270,
    backgroundColor:"red",
    zIndex:1
 
})
var mainModules=Ti.UI.createView({
    width:260,
    backgroundColor:"green",
    zIndex:2
 
})
var MainView=Ti.UI.createView({
    top:0,
    backgroundColor:"blue",
    zIndex:3,
    shadow:{
        shadowRadius:5,
        shadowOpacity:0.7,
        shadowOffset:{x:-10, y:0}
    }
 
})
var btn=Ti.UI.createButton({
    title: '|||',
    style: Ti.UI.iPhone.SystemButtonStyle.BORDERED,
    zIndex:4,
    top:0,
    left:7
})
 
btn.addEventListener('click', function(e)
{
 
    if(MainView.getLeft() == 0 ){
 
    MainView.animate({
        left:270,
        duration:500,
        curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    })
 
    }else{
 
   MainView.animate({
        left:0,
        duration:500,
        curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    })
 
 
    }    
 
}); 
 
 
eventHome.add(categoryListing)
eventHome.add(mainModules)
eventHome.add(MainView)
eventHome.add(btn)
 
 
 
 
 
 
 
 
 
 
eventHome.open()

2 Answers

Your Answer

Think you can help? Login to answer this question!

it shows [WARN] New layout set while view [object TiUIView] animating: Will relayout after animation.

— commented 7 months ago by sundara nataraja
your animation is working fine ,the only mistake is that you have not set height and widths of different views, views cover window if we don't set height and widths for the them and therefore only last added view is appearing on the window which has covered the whole window

— commented 7 months ago by Muhammad Adnan
hey sundara,

can you explain me what type of animation you want ???

here you have taken 3 views but wrote code for only one view (MainView).

— commented 7 months ago by Sarafaraz Babi
i need mainview to slide soo that it looks like facebook app...belows views should be static..

— commented 7 months ago by sundara nataraja

Answer 1

var eventHome=Ti.UI.createWindow({

background:&quot;#000&quot;

})

var categoryListing=Ti.UI.createView({

width:270,

height:40,

top:150,

backgroundColor:&quot;red&quot;,

zIndex:1

}) var mainModules=Ti.UI.createView({

width:260,

backgroundColor:&quot;green&quot;,

zIndex:2,

height:40,

width:30,

top: 100

}) var MainView=Ti.UI.createView({

top:0,

backgroundColor:&quot;blue&quot;,

zIndex:3,

height:30,

width:30,

shadow:{

    shadowRadius:5,

    shadowOpacity:0.7,

    shadowOffset:{x:-10, y:0}

}

}) var btn=Ti.UI.createButton({

title: '|||',

style: Ti.UI.iPhone.SystemButtonStyle.BORDERED,

zIndex:4,

top:0

})

btn.addEventListener('click', function(e) {

if(MainView.getLeft() == 0 ){


MainView.animate({

    left:270,

    duration:500,

    curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
})

}else{

MainView.animate({

    left:0,

    duration:500,

    curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
})


}

});

eventHome.add(categoryListing)

eventHome.add(mainModules)

eventHome.add(MainView)

eventHome.add(btn)

eventHome.open()

Answer 2

Just try this code....

var eventHome = Ti.UI.createWindow({
    background : "#000"
});
 
var categoryListing = Ti.UI.createView({
    top : 50,
    left : 0,
    height : 200,
    width : 320,
    backgroundColor : "red",
 
});
var mainModules = Ti.UI.createView({
    top : 50,
    left : 0,
    height : 200,
    width : 320,
    backgroundColor : "green",
 
});
 
var btn = Ti.UI.createButton({
    title : '|||',
    style : Ti.UI.iPhone.SystemButtonStyle.BORDERED,
    zIndex : 4,
    top : 0,
    left : 7
});
 
var flag = true;
 
btn.addEventListener('click', function(e) {
 
    if (flag) {
        mainModules.animate({
            left : 320,
            duration : 500
        });
    } else {
        mainModules.animate({
            left : 0,
            duration : 500
        });
 
    }
    flag = !flag;
});
 
eventHome.add(categoryListing)
eventHome.add(mainModules)
eventHome.add(btn)
 
eventHome.open()

i think this what you are looking for....