CODEWITHSUNDEEP
androidtitaniumtitanium-alloyappcelerator-mobile
Bunny
Bunny

Reputation: 237

sliding effect in Titanium from left to right

I am trying sliding effect with animation from left to right in Titanium. I have achieved most of it but there is some mistake when there is first left to right transition. Here is the code.

<Alloy>
<Window id = "win" onOpen="openCurrentIssue">
    <View id="view1"  width="75%" height="Ti.UI.FILL" left="0%" >
        <TableView id="menuTable"></TableView>
    </View>
    <View id="view2"  width="Ti.UI.FILL" height="Ti.UI.FILL" backgroundColor="#A9F5A9" >

        <View id="viewcheck1" >
            <Label id="title" width="Ti.UI.SIZE" text="Title" height="Ti.UI.SIZE" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER" color="black"></Label>
            <ImageView id="menuImg" image="/images/menu.png" onClick="showsideBar" left="5"></ImageView>
        </View>

        <View id="viewcheck2"  width="Ti.UI.SIZE" height="Ti.UI.SIZE" backgroundColor="#A9F5A9" >

            <Label id="cIssue" text="Demo" width="Ti.UI.SIZE" height="Ti.UI.SIZE" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER" top="10" color="black"></Label>
            <ImageView id="cImage" width="Ti.UI.SIZE" height="Ti.UI.SIZE" top="45"></ImageView>
            <Button id="cButton" title="Advertiser"></Button>
        </View>

        <View id="viewBelow" width="150" height="Ti.UI.FILL" backgroundColor="#A9A5A9" left="0%" visible="false" top="40">
            <TableView id="menuTable"></TableView>
        </View>

    </View>
</Window>

Here is the index.js file

var isMenu = false;
function showsideBar(e) {
try {
    if (isMenu) {
    $.viewBelow.animate({
        left : -150,
        duration : 300,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });
    isMenu = false;
} else {
    $.viewBelow.visible=true;
    $.viewBelow.animate({
        left : 0, 
        duration : 300,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });
    isMenu = true;
}

} catch(e) {
    Ti.API.info('Exception from index.js ' + e.value);

}}

This is the line where function lies 

<ImageView id="menuImg" image="/images/menu.png" onClick="showsideBar" left="5"></ImageView>

For the first time,the visible property gets true and the effect from left to right is not coming and after first transition it is working as expected. Can anyone help me out finding mistake in above code for the initial transition.

Upvotes: 4

Views: 601

Answers (1)

Swanand
Swanand

Reputation: 1138

I changed some of your code

<View id="viewBelow" width="150" height="Ti.UI.FILL" backgroundColor="#A9A5A9" left="-150" visible="false" top="40">
    <TableView id="menuTable"></TableView>
</View>

Change left from 0% to -150 and its working fine. Because previously you have already given it 0 and then animating your view's left to again 0 and making it visible. After changing it to -150 now at first time view's left is animating from -150 to 0.

Upvotes: 4

Related Questions