[英]Appcelerator ImageView, changing image on android blinks / flickers
我有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上,图像大小似乎是限制因素,减小图像的大小有助于解决此问题,尽管它在图像的第一个周期仍会闪烁。
在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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.