Appcelerator ImageView，改变android上的图像闪烁/闪烁

Question

我有 20 张图片循环显示健身锻炼。当更新图像（即从第 1 帧到第 2 帧）时，整个 imageView 会闪烁。这只发生在 Android 上，在 iOS 上可以正常工作。

这是发生的视频https://youtu.be/-CufuQErQ58 这是在模拟器上，但它也发生在我测试过的所有安卓设备上。

我尝试将 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

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

• 将带有新图像的另一个视图添加到容器视图中
• 加载图像后，从容器视图中删除级别 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
}