Appcelerator animation to move an image from one location to another

Question

I am trying to move an image from bottom left to top right position on the screen at the click event of the image. Now, when the image is at this position(top right), it should move to bottom right corner of the screen on the click event of the image. But the image doesn't move from the second position (top right). any suggestions why ?

This is the code for the .xml file :

<Alloy>
    <View class="container">
        <View class = " HeadingClass" >
            <Label class="headingClass" top = "0%">Scrollable View And Animation Screen</Label>
        </View>
        <ScrollableView class = "scrollableViewClass" id="scrollableView">
            <ImageView class="imgView1" id="imgViewId1"></ImageView>
            <ImageView class="imgView2" id="imgViewId2"></ImageView>
            <ImageView class="imgView3" id="imgViewId3"></ImageView>
            <ImageView class="imgView4" id="imgViewId4"></ImageView>
            <ImageView class="imgView5" id="imgViewId5"></ImageView>
        </ScrollableView>
        <View class="imageAnimationView" id="imageAnimation" >
            <ImageView class="animateImageClass" id="animateImage"></ImageView>
        </View> 
    </View>

</Alloy>

This is the code for the . js file :

var args = $.args;
$.animateImage.addEventListener('click', function(e) {
    if($.animateImage.top == "70%" && $.animateImage.left == "2%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "1%",
            left : "80%",
            duration : "2000" // top-right
        });
    }
    else if ($.animateImage.top == "1%" && $.animateImage.left == "80%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "70%",
            left : "80%",
            duration : "2000"
        });
    }
    if ($.animateImage.top == "70%" && $.animateImage.left == "80%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "70%",
            left : "2%",
            duration : "2000"
        });
    }
    $.animateImage.animate(viewAnimate);
});

Answer 1

I've tested your code with this tss

"#animateImage": {
    top:"70%",
    left:"2%",
    backgroundColor:"#00f",
    width:200,
    height:200
}

and it is working fine (Android, Ti. 6.1.1.GA).

But instead of checking the percentage of animateImage I would define a variable animatenStates and set it to 0,1,2 after each animation-step and check for this state. Calculating a percentage can lead in rounding errors and it will stop a position.

Here is a implementation with animationState and I've used the complete-callback to increase the state:

var args = $.args;
var animationState = 0;

$.animateImage.addEventListener('click', function(e) {
    var viewAnimate = Ti.UI.createAnimation({
        top: "0%",
        left: "0%",
        duration: 2000
    });

    if (animationState == 0) {
        viewAnimate.top = "0%";
        viewAnimate.left = "0%";
    } else if (animationState == 1) {
        viewAnimate.top = "70%";
        viewAnimate.left = "80%";
    } else if (animationState == 2) {
        viewAnimate.top = "70%";
        viewAnimate.left = "2%";
    }
    $.animateImage.animate(viewAnimate, function() {
        // complete - state + 1
        animationState++;
        if (animationState > 2) {
            animationState = 0;
        }
    });
});

$.index.open();