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的，做這樣的事情：一旦加載圖像刪除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 
}