Appcelerator ImageView，更改Android上的圖像閃爍/閃爍

Question

我有20張圖片，可以循環顯示健身運動。 更新圖像時（即從幀1到幀2），整個imageView閃爍。 這僅發生在Android上，在iOS上運行良好。

這是它發生的視頻https://youtu.be/-CufuQErQ58這是在模擬器上發生的，但它也在我測試過的所有android設備上發生。

我嘗試將imageView更改為僅帶有backgroundImage的視圖，並且該方法不會閃爍，但是它運行非常緩慢，並且使用了更多內存，並且經常崩潰。

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;
};

編輯

因此，經過進一步的挖掘，我發現了這篇文章-http://docs.appcelerator.com/platform/latest/#!/guide/Image_Best_Practices

在android上，圖像大小似乎是限制因素，減小圖像的大小有助於解決此問題，盡管它在圖像的第一個周期仍會閃爍。

Answer 1

在imageview周圍添加一個視圖（容器視圖），並執行以下操作：

• 將帶有新圖像的另一個視圖添加到容器視圖
• 加載圖像后，從容器視圖中刪除級別為0的imageview

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

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
}