0

I have 20 images which I cycle through to show a fitness exercise. When updating the image (i.e going from frame 1 to frame 2) the entire imageView blinks. This only happens on Android, on iOS it works fine.

Here is a video of it happening https://youtu.be/-CufuQErQ58 This is on emulator but its also happening on all android devices i've tested on.

I tried changing the imageView to just a view with a backgroundImage, and this works without blinking however it runs very slowly and uses a lot more memory and often crashes.

exports.imagesWindow = function(exercise, noOfImages) {
    var win = new SS.ui.win('landscape');
    var imgCount = 0;

    var header = new SS.ui.view(win, '10%', '100%'); header.top = 0; header.visible = true; header.backgroundColor = SS.ui.colors[0]; 
    var cueText = new SS.ui.normalLabel(header, "some text", 7); cueText.color = 'white';

    //var imgLeft = new SS.ui.responsiveImage({container:win, top:'10%', left:'2%', height: '75%', width: '30%', zoom: 0.3});
    //var imgCenter = new SS.ui.responsiveImage({container:win, top: '10%', left: '35%', height: '75%', width: '30%', zoom: 0.3});
    //var imgRight = new SS.ui.responsiveImage({container:win, top:'10%', left: '68%', height:'75%', width:'30%', zoom: 0.3});

    if (noOfImages === 3) { 
        imgLeft = new ImagePanel(win, '17%');
        imgCenter = new ImagePanel(win, '50%');
        imgRight = new ImagePanel(win, '83%');
    }

    else {
        imgLeft = new ImagePanel(win, '30%');
        imgRight = new ImagePanel(win, '70%');
    }


    function updateImages() { 
        cueText.text = (eval(exercise + "Cues"))[imgCount];
        instructionNumber.text = (imgCount+1) + "/20";

        if (noOfImages === 3) { 
            imgLeft.image = '/images/instructionImages/' + exercise + "/" + exercise + '_front_' + imgCount + '.jpg'; 
            imgCenter.image = '/images/instructionImages/' + exercise + "/" + exercise + '_side_' + imgCount + '.jpg'; 
            imgRight.image = '/images/instructionImages/' + exercise + "/" + exercise + '_back_' + imgCount + '.jpg'; 

            //SS.log("image updated: " + imgLeft.image + " " + imgCenter.image + " " + imgRight.image); 
        }

        else { 
            imgLeft.image = '/images/instructionImages/' + exercise + "/" + exercise + '_front_' + imgCount + '.jpg'; 
            imgRight.image = '/images/instructionImages/' + exercise + "/" + exercise + '_side_' + imgCount + '.jpg'; 

            }
    }




    //view.add(win);
    var homeView = new SS.ui.view(win, '12%', '30%'); homeView.center = {x: '5%', y: '92%'}; homeView.visible = true;

    var home = new SS.ui.dateButton(homeView, 'footer/home'); 
        home.addEventListener('click', function(){ if (start){ clearInterval(start); }; win.close(); });    


    var footerView = new SS.ui.view(win, '12%', '30%'); footerView.center = {x: '50%', y: '92%'}; footerView.visible = true;

    var prevImg = new SS.ui.dateButton(footerView, 'footer/prevFrame'); prevImg.left = 0;
        //prevImg.height = Ti.UI.SIZE;prevImg.width = Ti.UI.SIZE; 
        prevImg.addEventListener('click', goToPrev);

    var nextImg = new SS.ui.dateButton(footerView, 'footer/nextFrame'); //nextImg.height = Ti.UI.SIZE; nextImg.width = Ti.UI.SIZE; 
        nextImg.addEventListener('click', goToNext); nextImg.right = 0;

    var stopPlayBtn = new SS.ui.dateButton(footerView, 'footer/playVideo'); //stopPlayBtn.height = Ti.UI.SIZE;stopPlayBtn.width = Ti.UI.SIZE; 
        stopPlayBtn.addEventListener('click', stopPlay);

    var numberView = new SS.ui.view(win, '12%', '30%'); numberView.center = {x: '95%', y: '92%'}; numberView.visible = true;
    var instructionNumber = new SS.ui.normalLabel(numberView, (imgCount+1) + "/20", 5);

    updateImages();

    var start;

    function stopPlay() { 

            // start videos
        if (stopPlayBtn.image.indexOf('play')>=0) {  cueText.visible = false; start = setInterval(goToNext, 200);  stopPlayBtn.image =  '/images/footer/stopVideo.png';}
            // stop vidoes
        else {    clearInterval(start); cueText.visible = true; stopPlayBtn.image = '/images/footer/playVideo.png';  }

    }







    function goToPrev() { 
        if (imgCount > 0) { imgCount--; }
        else { imgCount = 19; };
        SS.log("imgCount: " + imgCount);
        updateImages();

    }

    function goToNext() { 
        if (imgCount < 19) { imgCount++; }
        else { imgCount = 0; };
        SS.log("imgCount: " + imgCount);

        updateImages();

    }





    return win;

};


var ImagePanel = function(viewToAdd, cX) { 
        var imageView = Ti.UI.createImageView({
            width: '30%',
            borderColor: 'white',
            center: {x: cX, y: '50%'}

        });

        viewToAdd.add(imageView);

        //resize for tablets
        if(Ti.Platform.osname.indexOf('ipad') >=0) { 
            imageView.height = '45%';
            imageView.borderWidth = 8;
            imageView.borderRadius = 12;
        }

        else { 
            imageView.height = '65%';
            imageView.borderWidth = 4;
            imageView.borderRadius = 6;
        }


        return imageView;
};

EDIT

So after a bit more digging I found this article - http://docs.appcelerator.com/platform/latest/#!/guide/Image_Best_Practices

It seems on android that the image size is the limiting factor, and reducing the size of the images helped fix this, although it still blinks on the first cycle of images.

4

1 回答 1

2

在 imageview 周围添加一个视图（容器视图）并执行以下操作：

  • 将带有新图像的另一个视图添加到容器视图
  • 加载图像后，从容器视图中删除级别 0 的图像视图

您甚至可以淡入新图像，使其看起来更好

XML

<View id="container"></View>

JS

// first image
var img = Ti.UI.createImageView();
$.container.add(img);

function changeImage(){
  // changing images and remove the old one
  var img = Ti.UI.createImageView();
  $.container.add(img);
  $.container.remove($.container.getChildren()[0]); // or fade out
}
于 2016-01-31T10:29:36.510 回答