Image animation with array of images for Android

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

I am trying our this code with initially 4 images. When user swipe left the image in the center moves to the left and the right image comes to center and vice verse when user swipe right. Here I want to take array of images where each time i swipe left or right the new image should be ready to animate. Please help. Thanks.

var imageFilenames = ['http://t2.gstatic.com/images?q=tbn:ANd9GcRVmC09FO4cQO5W-MHT7-HOXl9Cid5YteUPr-3O2qk62YJa72_OUw', 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0VCzK0pzQhM2Nr9BY9zlwxK8bO-G0FbS6ajXeUZwe7vKwOV_5Ww', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFcKorfT45-SBDv17VeUJpy2tAXtXNoqpscdO8KWZGhj3eYw8AxQ', 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSmm2vJrUjrya5aJ1dDaW1WxGwqYYJ3K15aymyggUFJwq3pLCKB', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS4WuPThj1PyQeq7OnmkcZxZUqGDimgPhTYOXXmdikdGCw2ysQ', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRH2WIB15BjbJK3sd8yOFkeQQSc53Y1TgJmCS0rpCzyTOUqybX-Dw'];
 
    var images = [];
 
    var store1 = Ti.UI.createImageView({
        width : '80dp',
        height : '80dp',
        backgroundImage : imageFilenames[0],
        left : -20
    });
    win.add(store1);
    var store = Ti.UI.createImageView({
        width : '100dp',
        height : '100dp',
        backgroundImage : imageFilenames[1],
        //top : 0
    });
    win.add(store);
 
    var store2 = Ti.UI.createImageView({
        width : '80dp',
        height : '80dp',
        backgroundImage : imageFilenames[2],
        right : -20
    });
    win.add(store2);
    var store3 = Ti.UI.createImageView({
        width : '80dp',
        height : '80dp',
        backgroundImage : imageFilenames[3],
        right : -20,
        opacity : 0
    });
    win.add(store3);
 
    /*var data = [];
    for (var i = 0; i <= 5; i++) {
        var store4 = Ti.UI.createImageView({
            width : '80dp',
            height : '80dp',
            right : -20,
            opacity : 0
        });
        data.push(store4);
        win.add(data);
    }*/
 
    var img = store.backgroundImage;
    var i = 0;
    function SlideLeft() {
 
        store.animate({
            duration : 800,
            left : -20,
            width : '80dp',
            height : '80dp',
 
        });
        store2.animate({
            duration : 800,
            right : 100,
            width : '100dp',
            height : '100dp',
 
        });
 
        store1.animate({
            duration : 800,
            opacity : 0
        });
 
        store3.animate({
            duration : 800,
            opacity : 1
        });
        store1.right = -20;
        if (imageFilenames.index == i) {
            Ti.API.info('return true');
            store1.backgroundImage = imageFilenames[i]
            i++;
        }
 
    }
 
    function SlideRight() {
        store.animate({
            duration : 800,
            left : 100,
            width : '100dp',
            height : '100dp',
        });
        store2.animate({
            duration : 800,
            right : -20,
            width : '80dp',
            height : '80dp',
        });
        store1.animate({
            duration : 800,
            opacity : 1
        });
        store3.animate({
            duration : 800,
            opacity : 0
        });
        store1.left = -20;
 
    }
 
 
    win.addEventListener('swipe', function(e) {
        if (e.direction == "left") {
            SlideLeft();
 
        } else if (e.direction == "right") {
            SlideRight();
        }
 
    });

3 Answers

Thanks for quick reply @Nick. I tried with Scrollable View , but I am unable to perform the animation effect on images. It will be kind if you help me. Thanks.

— answered 1 year ago by Darshana Patil
answer permalink
10 Comments
  • Add the image to a view, then add the view to the scrollableView

    — commented 1 year ago by Nick Milner

  • ok but i want to show 3 image at a time how will i show the next 3 images with animation effect?

    — commented 1 year ago by Darshana Patil

  • Add the three images to a single view, add the next three to another view etc etc.... Then add those views to the scrollable view

    — commented 1 year ago by Nick Milner

  • Show 7 more comments

Can any one suggest me a Module for the animation I am looking for ? I want this urgent as my project is pending for distribution. Please help. Thanks

Your Answer

Think you can help? Login to answer this question!