implement Pause and restart animation for image view in appcelerator titanium

Question

I have a image which keeps on animating in up- down direction. On clicking the image the image should pause animating and clicking it again should resume animation. I am using image view's pause() for now but it does nothing. Its mentioned that "This method works if multiple images are specified" but how can I use this for single image. Please find the code in below link. Thank you

index.xml :

<Alloy>
  <Window id="winIos">
    <View id="vOne" class='viewSize'>
      <ImageView id="one" class='oval' ></ImageView>
      <ImageView id="a" image= "/images/img_1.png"></ImageView>
    </View>
  </Window>
</Alloy>

index.js

var osname = Ti.Platform.osname;
if (osname == 'iphone') {

    var ANIMATION = require('/alloy/animation');
    var win = $.winIos;

    var randomArray=[];
    var n = 1;
    var rann;

    function showAnimations(){

        var imgName = "img_1.png";
        var ranImg = "/images" + "/" + imgName;

        win.getChildren()[0].id2 = imgName;
        win.getChildren()[0].touchEnabled = true;
        win.getChildren()[0].zIndex = 3;
        win.getChildren()[0].getChildren()[1].image = ranImg;

        animation = Ti.UI.createAnimation();    //animate image up
        animation.top = 20;
        animation.delay = 120;
        animation.duration = 1200;
        win.getChildren()[0].touchEnabled = true;
        win.getChildren()[0].getChildren()[1].animate(animation);

        animation.addEventListener('complete', function() {
            animation1 = Ti.UI.createAnimation();   //animate image down
            animation1.top = 159;
            animation1.delay = 900;
            animation1.duration = 1200;
            win.getChildren()[0].getChildren()[1].animate(animation1);

            animation1.addEventListener('complete', function() {
                win.getChildren()[0].touchEnabled = false;
            });
        });
    }

    setInterval(showAnimations, 4300);

    win.addEventListener('click', function(e) {
        console.log("imgSrc" + JSON.stringify(e.source.getChildren()[1]));

        if(e.source.getChildren()[1]){
            e.source.getChildren()[1].pause();
        }
    });

    win.addEventListener('close', function() {
        clearInterval(showAnimations);
    });

    win.open();
}

index.tss

"#winIos":{
    orientationModes:[Ti.UI.LANDSCAPE_RIGHT],
    backgroundColor:'white',
    id2:""
}

".viewSize":{
    height:150,
    width:150,
}

".oval":{
    image:'/images/oval.png',
    height:"50", 
    width:"150",  
    left:"0", 
    bottom:"-2", 
    touchEnabled:"false"
}

"#a":{
    id2:'',
    height:100,
    width:70,
    top:149,
    touchEnabled:false,
}

"#vOne":{
    id2:'',
    left:"80", 
    touchEnabled:false,
    top:"10",
    zIndex:0
}

miga miga · Accepted Answer · 2018-10-12T13:16:09

The ImageView pause() only works for multiple images as you've mentioned. That is a image slideshow, it has nothing to do with Ti.UI.Animation. You actually can't stop an animation on Android but there is an open PR (https://github.com/appcelerator/titanium_mobile/pull/10130) on implementing a stop().

Depending on your animation you could try to create a Lottie animation and use Ti.Animation (https://github.com/m1ga/ti.animation) since that includes pause and resume methods.

implement Pause and restart animation for image view in appcelerator titanium

1 Answers