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();

Answer 2

You cannot use the top/left/bottom/right properties to determine CURRENT location. Those values don't change when you animate. You must use the RECT property instead to get the current position.

Notes from the documentation: (http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.View-method-animate)

Note that if you use animate to move a view, the view's actual position is changed, but its layout properties, such as top, left, center and so on are not changed--these reflect the original values set by the user, not the actual position of the view.

The rect property can be used to determine the actual size and position of the view.