4

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.

Bunny
  • 237
  • 2
  • 13
  • I had a similiar problem while rotating images. My solution was a bit dirty: I just triggered my rotation once programmatically after initialising the view. After the 360 degrees rotation it all worked as expected. You can give it a try, although it is unconventional.. – Robin Ellerkmann Jul 09 '15 at 19:29
  • You can try @swanand modification. :-) It solved my mistake. – Bunny Jul 10 '15 at 05:36

1 Answers1

4

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.

Swanand
  • 1,138
  • 8
  • 21